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

Question

[Pipop]

Comments

[Lord_Dantes]

Я вставил бы svg картинкой. И по качеству норм и говнокодить не надо.

Answer 1

[approximate solution]

Так как это элемент украшения, то как и все элементы украшения делайте через before\after + у вас повторяющиеся "украшалки", можно создать 2 отдельных компонента следуя практики dry. Делаете 2 стилевых компоненты = 1 горизонтальная линия dashed, вторая полукруг dashed, горизонтальная у вас помещается за блоком с помощью before, а полукруг вы используете в одном месте обычные, а второй через rotate.

Comments

[Pipop]

Как сделать полукруг? Также высота блоков с иконками может меняться

[approximate solution]

Pipop, можно расчитать с помощью calc, а полукруг можно сделать с помощью border-radius