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

Question

[Владислав Бондаренко]

Всем доброго, есть макет, в нем такие блоки:
prntscr.com/ekelh2
Прошу совета, насколько трудно сделать такие блоки, говорю сразу я новичок.
Буду благодарен за совет.

Answer 1

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

https://jsfiddle.net/webirus/zso8knsp/
Дальше разберешься.

Comments

[Роман]

не лень же было настрочить

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

Роман Жариков: если бы было не лень, дописать бы целиком))) да еще и с адаптивностью)

Answer 2

[dom1n1k]

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

Comments

[Novamoscow]

Вот! Именно, как и писал выше=) Почему многих тянет сразу верстать, узнать "как верстать?" Ни кто не хочет ?)))

[HelpSophie]

Novamoscow: В большинстве случаев, если к макету не прилагается вариантов для "мобилок" или сопроводительной записки, то это значит, что дизайнер вообще не в курсе как это должно адаптироваться. А если начать спрашивать, то становится понятно, что и уроки про пропорции и простейшую геометрию он тоже пропустил.
А верстальщиками становятся скорее те, кто не пропустил и они в состоянии сами продумать как это можно адаптировать.

Answer 3

[Novamoscow]

Мне кажется тут вопрос не правильно поставлен.
Как адаптивно это должно выглядеть вам говорит заказчик или дизайнер. Ни как иначе. Если делать самому, потом будет куча правок, недовольств и еще скажут, что вы верстать не умеете =)

А вот когда вам уже пришлют картинку или напишут ТЗ для другого разрешения, кидайте сюда, будем думать =)

Answer 4

[Виталий]

В зависимости от того как оно будет на планшете и телефоне

говорю сразу я новичок.

ну макет не из простых для новичка

Answer 5

[Fredd Monty]

Попросите дизайнера сверстать! :)

По сути (я тоже новичок):
я бы before вставил белые треугольники, абсолютом.
соединить можно after прямоугольником, тоже абсолют.
На мобильных убрать то что не нужно.

Comments

[Fredd Monty]

p.s. Если вы дизайнер, то шутка не получилась... )))