bugfix> css > 投稿

CSSを使用してこのアウトライン効果を作成しようとしています。私は正しい方向に考えることができず、曲げにイメージを使いたくありません。

それで、これを行うための最良のアプローチは何ですか?

回答 1 件
  • ここにいくつかの box-shadow に依存するアイデアがあります 、 border  要素間のリンクを作成する擬似要素:

    .out {
      display: inline-block;
      border-radius: 30px;
      width: 120px;
      height: 50px;
      box-shadow: 0 0 0 3px #fff inset, 0 0 0 50px lightblue inset;
      border: 2px dashed red;
      position: relative;
    }
    .out:not(:last-child)::after {
      content: "";
      position: absolute;
      right: -8px;
      top: calc(50% - 5px);
      width: 9px;
      height: 10px;
      border-top: 2px dashed red;
      border-bottom: 2px dashed red;
      z-index: 1;
      box-shadow: 0 0 0 3px #fff inset, 0 0 0 50px lightblue inset;
    }
    .out:not(:last-child):before {
      content: "";
      position: absolute;
      right: -40px;
      top: calc(50% - 1.5px);
      width: 60px;
      height: 5px;
      z-index: 3;
      background: lightblue;
    }
    
    
    <div>
      <div class="out">
      </div>
      <div class="out">
      </div>
      <div class="out">
      </div>
      <div class="out">
      </div>
    </div>
    
    

あなたの答え