@alexeeey_kuznetsov

Как сверстать такую связь между элементами под Bootstrap?

5c157227b7a84030610395.png
Как можно реализовать такую черную полоску с кружками связывающая 4 строки. Дизайн выполнялся под сетку Bootstrap 4, поэтому интересна реализация конкретно под нее. Но это скорее всего по методам реализации не будет иметь разницы, что BS, что без него.
Жду помощи. Заранее спасибо за ответ!
  • Вопрос задан
  • 390 просмотров
Решения вопроса 1
vicodin
@vicodin
Имею некоторый опыт
Чтобы нарисовать эту полоску нужно использовать псевдоэлементы и селекторы чётности.
::before - кружочки с бордерами
::after- линии
:nth-child(odd/even) чтобы задавать угол линий
:nth-child(1,2,3,4,5, ...)нагенерировать разные цвета, если они просто всегда идут в одном порядке. Если зависят от родителя - currentColor, если должен быть рандом или что-то другое - уже понадобится Javascript.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы