箭头从点到点

Question

我有一个PSD，我必须转换为HTML。我有一些元素的问题，更确切地说我不知道​​如何创建它，而且我不知道如何命名它以在谷歌中找到示例。寻找你的建议。那些箭应该响应（变得更长或更短）

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>