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

Question

[barmaleyko111]

Доброго дня! Нужно сверстать блок как на картинке. Подскажите пожалуйста какие есть варианты реализации изогнутой штриховой линии

Comments

[Aetae]

Три блока с border: 1px dashed.
С одной стороны два с border-radius: 50% 0 0 50%, с другой один с border-radius: 0 50% 50% 0, какие проблемы?
Только спозиционировать правильно и всех делов, но это уже зависит от конкретной вёрстки.

Answer 1

[WapSter]

https://github.com/anseki/leader-line

Answer 2

[Seanyr]

Как вариант, чисто на CSS:
- Горизонтальные линии через градиенты в background
- круглые элементы через бордеры у before и after
Убирать ненужные части можно играясь с first-child, last-child или непосредственно у самих элементов через доп классы.
Из минусов, не помню как делать кастомную длину штриха для бордеров.
Вот набросал быстрый вариант, значения здесь фиксированные, но можно выносить в переменные и считать через calc:
https://codepen.io/Arseny_dp/pen/vYNorjv

Answer 3

[Alibek Kulseitov]

Вариант 1, но там много моментов:
Добавить эту змейку как фон на весь блок соответственно нужно прописать некую фикс высоту этому блоку.

Вариант 2:
Вырезать линии от кружка с иконкой до цифры и добавлять через before, after