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

Question

[5eppuku]

Какие есть варианты сверстать такие блоки? желательно пример какой-нибудь похожий.

Comments

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

А зачем за проект браться было?)

[Антон]

Владислав Бойченко, ну, наверное, чтобы не уволили!
Тут же не все московские фрилансеры и вольные люди на Гоа под пальмой.
Но в целом, да - хороший вопрос.

[Алекс Глебов]

дизайнеру вернуть на доработку

[EvgenyApMr]

Если сайт делается не на выставку, то сделай маски белого цвета под форму и задай нужную высоту блоку. Снизу та же история.
У дизайнеров в фотошопе все легко и просто, иногда не особо думают о страданиях верстальщика)

Answer 1

[Андрей Федоров]

Дизайнера на кол. Картинками делайте.

Comments

[itsjustmypage]

А вы таки только прямоугольники верстаете

[Андрей Федоров]

itsjustmypage, без предоплаты даже прямоугольники не верстаю. :Р

[Андрей Федоров]

uyrij, а когда это mask научился по кривым Безье работать? Или маска все же будет картинкой? )

[hellcaster]

uyrij, zoom? Это какая-то реферальная система?

Answer 2

[jamtuson]

1. Верстаете обычный блок(без скосов)
2. Конвертируете блоки в канвас https://html2canvas.hertzen.com/
3. Создаете кривую в канвасе и делаете clip() элементам
4. Подменяете блоки на canvas - элементы

Answer 3

[stas_mihailov]

SVG маски попробуйте

Answer 4

[lukoie]

проще всего - нарисовать эти блоки в Иллюстраторе, и экспортировать в свг

Comments

[5eppuku]

нужно чтобы контент можно было менять через админку. а для каждого исправления в тексте делать новое свг не вариант(

[lukoie]

5eppuku, https://webplatform.github.io/docs/tutorials/exter...

[Владимир Коротенко]

5eppuku,
1-6 прозрачный png 7-9 фиксированная высота, для слишком длинного блока ...
Хотя можно сделать в 3 столбца и применить cover, а текст поднять сверху через z index
https://developer.mozilla.org/en-US/docs/Web/CSS/o...

[lukoie]

Владимир Коротенко, эмм... то есть для каждого поста им надо будет готовить пнг картинку??? Это ж динамически будет меняться контент. То есть надо чтоб обычная квадратная картинка на выводе была вот такой. Так что тут только свг.

[Владимир Коротенко]

lukoie, Не совсем понял почему. Что я вижу карусель с 3 блоками и возможно еще 3 блоками на другом слайде. Блоки 7-9 это обычный текст, который можно поменять. А вот насчет блоков 1-3 да. только svg но как мне кажется это более менее постоянные блоки. Раз сделали и остались

Answer 5

[Александра]

В теории можно нижнюю часть в свг взять, поставить с зет-индексом выше фото и отрицательным марджином вверх.
А верхушку над фото в свг before-ом.
Сделать три варианта, зациклить с :nth-child

Comments

[uyrij]

Не, просто div с картинками просто маски. Иначе не респонсив

[stas_mihailov]

Александра но вариант "дизайнера на кол" остаётся лучше)

Answer 6

[avaled]

Добрый день.
Я бы сделал следующим образом.
Картинка для навигации https ://prnt.sc/s6yxr1
1)PNG картинка с position: absolute;
2)Текст с необходимыми вам отступами.
3)Картинку в низ блока (фон однородный по цвету, проблем не может быть