ポイントツーポイントの矢印

Question

私はhtmlに変換する必要があるPSDを持っています。私はいくつかの要素に問題があります。正確には、どうやって作成するのか分かりません。また、Googleで例を見つけるために名前を付ける方法もわかりません。あなたのアドバイスを探しています。これらの矢印は、私が背景に破線を与えるだろう（長くしたり短くなって）

Answer 1

応答する必要があります。それから、CSSを使ってアイコンを上、下、中央に矢印の位置に合わせます。要素が大きくなったり縮小したりすると、アイコンはサイジングと一緒に移動し、背景の点線をカバーします。ここで

は、私はあなたが始めた...あなたが開始

.container { 
 
    box-sizing: border-box; 
 
    width: 80%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: column; 
 
} 
 
.top-dash { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 30px; 
 
    margin-bottom: 1em; 
 
    background-color: black; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
} 
 
.top-dash:before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 13px; 
 
    width: 100%; 
 
    border-top: 5px dashed orange; 
 
} 
 
[class*="word"] { 
 
    display: block; 
 
    padding-right: 1em; 
 
    background-color: black; 
 
    color: orange; 
 
    font-size: 18px; 
 
    font-weight: bold; 
 
    z-index: 5; 
 
} 
 
[class*="word"]:first-child { 
 
    padding-left: 1em; 
 
} 
 
[class*="word"]:nth-child(n+2):before { 
 
    content: ">"; 
 
    padding-right: 1em; 
 
} 
 
.content { 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
    padding: 0 2em; 
 
    border-left: 60px solid blue; 
 
} 
 
.side-dash { 
 
    position: absolute; 
 
    left: -60px; 
 
    top: 0; 
 
    width: 60px; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    display: flex; 
 
} 
 
.side-dash:before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 28px; 
 
    top: 0; 
 
    height: 100%; 
 
    border-left: 5px dashed white; 
 
}

<div class="container"> 
 
    <div class="top-dash"> 
 
    <span class="word-left">ONE</span> 
 
    <span class="word-mid">TWO</span> 
 
    <span class="word-right">THREE</span> 
 
    </div> 
 
    <div class="content"> 
 
    <div class="side-dash"> 
 
     <span class="icon-top"></span> 
 
     <span class="icon-mid"></span> 
 
     <span class="icon-bot"></span> 
 
    </div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, cupiditate, explicabo! Voluptatibus placeat quod magnam soluta, fuga molestiae consectetur doloribus distinctio ipsum voluptas labore delectus reprehenderit rem voluptate, beatae nesciunt.</p> 
 
    <p>Nisi excepturi nobis ipsam perferendis nemo ipsa! Aspernatur quaerat ad, harum sapiente? Adipisci, ea. Aperiam exercitationem unde reiciendis obcaecati dolorem sit vitae animi, ut at quisquam corporis ratione voluptatum modi!</p> 
 
    <p>Assumenda explicabo voluptatum ea porro unde quo at praesentium temporibus quae optio, laudantium ab minus vero quas, repellat nihil. Laudantium, facere. Tempora adipisci earum voluptatem deserunt atque eos fugiat debitis.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, cupiditate, explicabo! Voluptatibus placeat quod magnam soluta, fuga molestiae consectetur doloribus distinctio ipsum voluptas labore delectus reprehenderit rem voluptate, beatae nesciunt.</p> 
 
    <p>Nisi excepturi nobis ipsam perferendis nemo ipsa! Aspernatur quaerat ad, harum sapiente? Adipisci, ea. Aperiam exercitationem unde reiciendis obcaecati dolorem sit vitae animi, ut at quisquam corporis ratione voluptatum modi!</p> 
 
    <p>Assumenda explicabo voluptatum ea porro unde quo at praesentium temporibus quae optio, laudantium ab minus vero quas, repellat nihil. Laudantium, facere. Tempora adipisci earum voluptatem deserunt atque eos fugiat debitis.</p> 
 
    </div> 
 
</div>