Pfeile von Punkt zu Punkt

Question

Ich habe eine PSD, die ich in HTML konvertieren muss. Ich habe ein Problem mit einigen Elementen, um genau zu sein, ich habe keine Ahnung, wie man es erstellt, außerdem weiß ich nicht, wie man es nennt, um Beispiele in Google zu finden. Auf der Suche nach Ihren Ratschlägen. Diese Pfeile sollten ansprechbar sein (werden länger oder kürzer)

Answer 1

Ich würde dem Hintergrund der gestrichelten Linien geben. Dann würde ich die Symbole mit ihren Pfeilspitzen oben, unten und in der Mitte mit css positionieren. Wenn das Element dann vergrößert und verkleinert wird, bewegen sich die Symbole mit der Bemaßung und decken die gestrichelten Linien im Hintergrund ab.

Hier, ich habe Sie begann ...

.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>