CODEWITHSUNDEEP
htmlcss
vladys.bo
vladys.bo

Reputation: 740

Arrows from point to point


I have a PSD which I have to convert to html. I have a problem with some elements, to be more precise I have no idea how to create it, furthermore I don't know how to name it to find examples in google. Looking for your advices. Those arrows should be responsive(become longer or shorter) First element

Second element

Upvotes: 0

Views: 51

Answers (1)

haltersweb
haltersweb

Reputation: 3139

I would give the background the dashed lines. Then I would position the icons along with their arrow heads at the top, bottom, and middle using css. Then as the element grows and shrinks the icons move with the sizing and cover the dashed lines in the background.

Here, I got you started...

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

Upvotes: 2

Related Questions