Вертикальные шаги прогресса с CSS

Question

У меня есть реагирующие компоненты, печатающие маршрут из поезда, и мне нужно объединить круги с вертикальной линией, как это:

Мне нужнообъединить эти узлы (круги с вертикальной чертой) и искал идею.Я использую flex, а элементы визуализируются с использованием компонента реагирования, который включает в себя 3 подкомпонента (один со временем, один с узлом-кругом и один со станцией и в реальном времени).

Мне нужнонаписать css с нуля (используя максимум flexbox или сетку).

Заранее спасибо.

Answer 1

Моя попытка.

Я бы пошел с неупорядоченным списком, где время и описание являются потомками flexbox элементов списка. Точечная и вертикальная линии могут быть легко нарисованы с помощью псевдоэлементов (правильно сложены).

Кодовая демонстрация

---

Разметка

<ul class="events">
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time</span></li>
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time</span></li>
  ...
</ul>

CSS

.events li { 
  display     : flex; 
}

.events time { 
  position : relative;
  color    : #ccc;
  padding  : 0 1.5em;  }

.events time::after { 
   content: "";
   position      : absolute;
   z-index       : 2;
   right         : 0;
   top           : 0;
   transform     : translateX(50%);
   border-radius : 50%;
   background    : #fff;
   border        : 1px #ccc solid;
   width         : .8em;
   height        : .8em;
}


.events span {
  padding  : 0 1.5em 1.5em 1.5em;
  position : relative;
}

.events span::before {
   content     : "";
   position    : absolute;
   z-index     : 1;
   left        : 0;
   height      : 100%;
   border-left : 1px #ccc solid;
}

.events strong {
   display: block;
}

---

Окончательный результат

Answer 2

Вы можете использовать рамку на обёртке так:

.timeline-wrapper {
  margin-left: 1.5rem;
  border-left: 3px solid #ddd;
}
.node {
  padding-left: .5rem;
  padding-bottom: 1.5rem;
  position: relative;
}
.node h3, .node p {
  margin: 0;
}
.node::before {
  content: "";
  width: .5rem;
  height: .5rem;
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 50%;
  position: absolute;
  top: .3rem;
  left: -.5rem;
}

<div class="timeline-wrapper">
  <div class="node">
    <h3>Title</h3>
    <p>Status / Time</p>
  </div>
  <div class="node">
    <h3>Title</h3>
    <p>Status / Time</p>
  </div>
  <div class="node">
    <h3>Title</h3>
    <p>Status / Time</p>
  </div>
  <div class="node">
    <h3>Title</h3>
    <p>Status / Time</p>
  </div>
  <div class="node">
    <h3>Title</h3>
    <p>Status / Time</p>
  </div>
</div>

Answer 3

Круги можно нарисовать с помощью элементов div с радиусом границы, а затем двух круговых элементов div и отделить от другого элемента div с выделенным цветом боковой границы.