Как это сверстать?

Question

[Дмитрий Жуков]

Собственно, вопрос. Как можно реализовать в верстке эти самые линии-зигзаги между блоками?
И так, чтоб было адаптивно. Весь мозг сломал.

Answer 1

[Максим Тимофеев]

например с помощью :after на который положить картинку и задать повторение по x, а шарики через :before без повторения.
Как вариант - svg
Самый простой вариант - просто все 1 картинка, так как семантики там нет, потери в seo минимальны, то может и не стоит придумывать велосипед

Answer 2

[Stimulate]

https://codepen.io/zoerooney/pen/pvOaxR

Answer 3

[Максим]

https://codepen.io/MaximLensky/pen/qpbXpg?editors=1100 полностью соответствует

Comments

[IIIu6ko]

Огонь способ, посмеялся) но, где адаптив?! :D Через js количество точек уменьшать?

[Максим]

Александр Шибков, про адаптив я не подумал ...но идею дал

[Максим]

Александр Шибков, проверь щас - вот чуток адаптив добавил и js не понадобился

[IIIu6ko]

Максим Ленский, Линии поломались.

[Максим]

Александр Шибков, я исправлял видать в этот момент - щас посмотри

[Максим]

Александр Шибков,

[IIIu6ko]

Максим Ленский, хз, у меня всё также осталось. Обнови ссылку.

[Максим]

Александр Шибков, я скрины оставил - наверно плохая поддержка wavy

[Максим]

Александр Шибков, щас лучше ?

[IIIu6ko]

Максим Ленский, Неа, там overflow: hidden; линии режет, надо высоту .line увеличить немного.

[Максим]

Александр Шибков, так ? height хреново влияет

[IIIu6ko]

Максим Ленский, Да, уже не обрезает.