Как правильно сверстать путь — «змейку»?

Question

[ak_wi]

Как сделать норм отрисовку с линиями (не тупо вставить картинку) и затем запарится, чтобы это было адаптивно до резины?

Answer 1

[Алексей Скляров]

Ничего сложного, если напрячь извилины и увидеть ваш рисунок несколько иначе. Тогда выходит что ваша змейка это просто 3 блока с 33..33% шириной. Просто для первого блока не показывается правая и нижняя граница (border) и для верхнего - верхняя и права. Закрутку даете через border-radius, с тем, что между ними находится можете как хотите разобраться. можете сделать полосой, можете сделать блоком с только одной границей. Расположить проще всего флексами.

Answer 2

[dsmaslov]

Примеры:

1. На бутстрапе: https://codepen.io/cplepage/pen/EozVXL
2. На флексах: https://codepen.io/paulhbarker/pen/apvGdv + https://codepen.io/tutsplus/pen/ZKpNwm

Примеров и идей для реализации такого таймлайна много, решить задачу можно тоже разными путями.