Вёртска сложного блока?

Question

[Данил Тивиков]

Как верстать подобные блоки? Буду рад примерам с фиддла либо с кодпена

Comments

[mShpakov]

1) сломать нос дизайнеру
2) посмотреть, что таких вопросов миллион на тостере

[Никита Егоров]

mShpakov, да, но как их искать, если люди к заголовку не могут придумать ничего лучше:

Вёртска сложного блока?

[mShpakov]

Никита Егоров, а кто им в этом виноват?)

[Никита Егоров]

mShpakov, на самом деле сложный вопрос.

[Данил Тивиков]

mShpakov, можешь бросить ссылочки на вопросы?

[mShpakov]

Данил Тивиков, например так?
Как такое верстают?
Дальше сами

Answer 1

[xmoonlight]

Тут

Comments

[Виталий Першин]

Мощно

Answer 2

[Александр]

Во-первых, ударить дизайнера, сломать ему руки и запретить работать где-либо, во-вторых сделать так, как сказал webdev341 и в media запросах изменять положение.
Если тебя держат в заложниках и заставляют такое делать - делай как описано выше, если нет, то сделай все что бы доказать заказчику, что это плохо, ведь это ОООчень плохо!

Comments

[mShpakov]

webdev341, или, возможно, человек просто учится на попавшемся под руку макете

Answer 3

[Svetley]

Хм.. Ну точно стоит сделать блок картинка-описание-номер. Номер, к стати, хорошо бы сделать через counter и псевдоэлемент.
Раскидать эти блоки можно марджинами(+ и -) или, да, тем же абсолютом.
Что касается траектории, то ее лучше сделать отдельной картинкой и поставить на фон контейнеру.
Если есть задача отзывчивого-интерфейса, а не просто адаптивного, то можно подумать что-нибудь с svg (я про привязку траектории к блокам), хотя не уверен в возможности этого, но посмотреть можно, это интересный кейс.

Answer 4

[Дмитрий]

Белорусский дизайн) Верстать гридами и вкладывать друг в друга или с позиционированием плясать.

Answer 5

[Mike]

Верстать цельной картинкой, запросив у дизайнера три-четыре варианта картинки под разные разрешения.