Как такое правильно сверстать?

Question

[an]

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

ведь должна резина быть по идее

Спасибо

Comments

[Денис Инешин]

Страдать. Дизайнер явно не понимает как работает веб и пришёл из верстки плакатов на стену.

[an]

Денис Инешин,

:D
Ясно, Спасибо

[Вадим]

an, Есть ещё другой вариант.
Прийти к дизайнеру и сказать: "Слушай, мне так понравилось, прикольно, красиво, свежо. Но нужно всё переделать."
И дальше рассказать про переполнение текста, про разность рендеринга шрифтов, про адаптивность.

Ну а если заказчик настаивает - то сказать что это займёт любое подходящее лично Вам количество времени и в путь дорогу.

Тут на тостере про это спрашивают раз в месяц примерно. В некоторых ответах есть решения на js, которые соединяют шаги линиями. Можно взять реализацию за основу и допиливать, если не подойдёт.

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

Я таких дизайнеров называю иллюстраторами

[an]

Вадим,
:D
да я думаете поиском не пользовался тут? )
видел кучу похожих реализаций, но там как бы технически более правильно сделано
а тут немного геморройно

[Антон]

Антон Литвиненко, э как вы завуалировали слово-характеристику на букву П

[Ankhena]

an,

"Слушай, мне так понравилось, прикольно, красиво, свежо. Но нужно всё переделать."
И дальше рассказать про переполнение текста, про разность рендеринга шрифтов, про адаптивность.

И при этом попросить нарисовать кучку разных вариаций этого блока для "чуть побольше шрифт", "чуть поменьше шрифт", "чуть больше строк в этом блочике" и т.д., короче под разнообразные переполнения.

А так да, картинка фоном. Поверх текст гридами или абсолютом.

Answer 1

[RAX7]

Раздели змейку на отдельные сегменты и экспонируй их в svg. У svg есть аттрибут vector-effect, который в сочетании с preserveAspectRatio="none" позволит сделать сегменты кривой более адаптивными. Кривая будет всячески деформироваться, а толщина обводки и пунктирные точки будут фиксированного размера без искажений. Остается только посчитать размеры svg, но это сделать не сложно. Ну и на меньших разрешениях добавить медиа-запросы и пересчитать количество колонок, размеры, позицию svg.

Comments

[Вадим]

Маньяк :-)

Answer 2

[Даниил]

Возможно и скорее всего, это будет глупый вариант, но все же... Если фон, цифры и саму змейку поставить бекграундом (т.е это все одно изображение). И там уже, даже теми же флексами расставить будет не так трудно.
Но!. Присоединяюсь к комментариям вашего вопроса. Стоит поговорить с дизайнером и объяснить, как "работает", верстка. И если поменять дизайн, ну никак нельзя, то можно попровать воспользоваться мои советом.
Терпения и успехов :)

Answer 3

[Денис Инешин]

Если этого хочет клиент - забить на адаптивность, забить на всё и тупо сверстать как есть, абсолютно фиксированную портянку.

На мобилах будут зумить как 10 лет назад)