Vertical timeline

240

17 марта 2022, 03:10

Я прошу у вас совета, как правильно реализовать данный vertical timeline, такой как на картинке.

Особенно, как сделать круги и вертикальные линии относительно элемента справа. Буду очень благодарен.

P.s. Я так же использую Bootstrap 4.

Answer 1

Например вот так можно сделать из бордеров градиентов:

body { 
  background: wheat; 
} 
 
section { 
  display: flex; 
} 
 
.timeline { 
  width: 70px; 
  display: flex; 
  background-image: radial-gradient(circle at center 20px, #0000 10.5px, #000 12px, #000 13px, #0000 14.5px); 
} 
 
section:not(:last-child) .timeline:after { 
  content: ''; 
  border-right: solid; 
  margin-top:40px; 
  width:calc(50% - 1px); 
} 
 
.year { 
  font-size: 30px; 
  width: 70px; 
} 
 
.text { 
  width: 450px; 
  padding-bottom: 20px; 
}

<div> 
  <section> 
    <div class=year>2008</div> 
    <div class=timeline></div> 
    <div class=text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
  </section> 
  <section> 
    <div class=year>2011</div> 
    <div class=timeline></div> 
    <div class=text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> 
  </section> 
  <section> 
    <div class=year>2020</div> 
    <div class=timeline></div> 
    <div class=text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
  </section> 
</div>

Answer 2

1) На псевдоэлементах - может быть вариант ?

* { 
  box-sizing: border-box 
} 
 
p { 
  width: 300px; 
  margin: 36px 20px 0 150px; 
  padding-left: 30px; 
  position: relative; 
  font-size: 20px; 
} 
 
p span { 
  position: absolute; 
  left: -90px; 
  font-size: 24px; 
} 
 
p:after { 
  content: ""; 
  display: block; 
  width: 20px; 
  height: 20px; 
  border-radius: 50px; 
  position: absolute; 
  top: 0px; 
  left: -12px; 
  border: 2px solid red; 
} 
 
p:before { 
  content: ""; 
  display: block; 
  width: 0; 
  height: 100%; 
  border-radius: 50px; 
  position: absolute; 
  top: 28px; 
  left: -1px; 
  border: 1px solid red; 
}

<p> 
  <span>2000</span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, omnis eveniet at cum maiores fugiat. 
</p> 
 
<p> 
  <span>2019</span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, omnis eveniet at cum maiores fugiat expedita soluta quia et iste quae distinctio voluptatibus, perspiciatis maxime quibusdam est saepe eligendi delectus. 
</p>

2) Тоже на градиентах

p { 
  width: 300px; 
  margin-left: 100px; 
  position: relative; 
  font-size: 14px; 
  padding-left: 20px; 
  padding-bottom: 10px; 
} 
 
p span { 
  position: absolute; 
  left: -70px; 
  font-size: 20px; 
} 
 
p:after { 
  content: ""; 
  display: block; 
  width: 20px; 
  height: 100%; 
  position: absolute; 
  left: -10px; 
  top: 0; 
  padding-left: 20px; 
  background: radial-gradient(circle at 10px 8px, #000 8px, transparent 8px), linear-gradient(90deg, #000 3px, transparent 3px); 
  background-position: 0 0, 8px 30px; 
}

<p> 
  <span>2019</span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore non illo, ipsa vel qui blanditiis dolore maiores eum? 
</p> 
<p> 
  <span>2020</span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique sed fugiat voluptatum error esse dicta animi, est quaerat officia explicabo cupiditate, molestiae repellat tenetur reprehenderit excepturi quod aliquid vel! Atque! 
</p>