Как лучше всего сделать такой блок и элементы в нём?

Question

[Максим Иванов]

Особенно как сделать:
- такие пунктиры (закруглены в одном месте)?
- и с помощью чего лучше расположить машины? (мб флекс)

Comments

[Антон Литвиненко]

Я бы тупо картинкой сделал. Это уже не вёрстка а издевательство

[Максим Иванов]

Антон Литвиненко, Я бы тоже, но в дело в том, что на маленьких экранах весь транспорт выстраивается вертикально по одному xD

[Ankhena]

Зависит от идей дизайнера при адаптиве и функциональности этой штуки.
Если они просты, то одной SVG, текст можно внутрь SVG или абсолютом.
Если они перестраиваются, кликабельны, то разбить на пачку SVG.

Вот тут похожий вопрос с шикарным ответом Кто сталкивался с версткой такого типа макета?

[Антон Литвиненко]

Максим Иванов, а на маленьких экранах вторую картинку

Answer 1

[RAX7]

Comments

[Антон Литвиненко]

Какова вероятность что ты ИИ?

[RAX7]

Антон Литвиненко, Uncaught SyntaxError: Unexpected token К at line 0

Answer 2

[Иван В]

Пунктиры и закругления можно сделать с помощью border-style (со значением dashed) и border-radius.
Но с dashed прокатит только если дизайнеру все равно на длину пунктирной линии (ее нельзя задать, только ширину).

На самом деле, лучше вставить svg, отдельными картинками под разные разрешения.
Можно, конечно, заверстать из отдельных элементов, но это очень долго (особенно если нужен будет адаптив).

Answer 3

[Мехман Агаев]

Линии бекграундом, а иллюстрации SVG