Как сделать такую адаптивную структуру?

Question

[tesko]

Привет всем. Не могу верно сформулировать вопрос, однако как состряпать такой вид структуры?
Прямые линии и полудуг

Comments

[Rustam Bainazarov]

Почему только псевдоэлементы? Да хоть фон, хоть обычные элементы. Псевдоэлементы удобны, чтобы делать прививку к конкретному родительскому элементу без необходимости создания доп. разметки.

[Сергей Горячев]

Однако, пседвоэлементы могут оказаться в данной ситуации более удобным решением при адаптации. Так как сейчас "изгиб" между 4 и 5 шагом, а при уменьшении экрана окажется между 3 и 4, 2 и 3. Таким образом превращаться на CSS линию и полукруг будет проще.

Answer 1

[Максим]

1) https://codepen.io/topicstarter/pen/ZqOBEb
2) https://codepen.io/topicstarter/pen/GzoMwq