Как Сверстать направляющие от блока к блоку(border змейкой)?

Доброго дня! Нужно сверстать блок как на картинке. Подскажите пожалуйста какие есть варианты реализации изогнутой штриховой линии5ed1432447ba3594105074.png
  • Вопрос задан
  • 4116 просмотров
Решения вопроса 3
wapster92
@wapster92 Куратор тега CSS
Ответ написан
Комментировать
Seanyr
@Seanyr
Как вариант, чисто на CSS:
- Горизонтальные линии через градиенты в background
- круглые элементы через бордеры у before и after
Убирать ненужные части можно играясь с first-child, last-child или непосредственно у самих элементов через доп классы.
Из минусов, не помню как делать кастомную длину штриха для бордеров.
Вот набросал быстрый вариант, значения здесь фиксированные, но можно выносить в переменные и считать через calc:
https://codepen.io/Arseny_dp/pen/vYNorjv
Ответ написан
Комментировать
AlibekKulseitov
@AlibekKulseitov
Люблю верстать и писать музыку
Вариант 1, но там много моментов:
Добавить эту змейку как фон на весь блок соответственно нужно прописать некую фикс высоту этому блоку.

Вариант 2:
Вырезать линии от кружка с иконкой до цифры и добавлять через before, after
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы