Как сверстать блок нестандартной формы с фоновыми изображениями?

Question

[Kilila]

Ден добрый всем. Подскажите (или, если есть примеры верстки, то накидайте пожалуйста), каким образом можно сверстать такой пример?
Находил примеры подобные: jsbin.com/ketoluheji/1/edit , но это же не то.

Comments

[Ульрих]

Я бы начал с наказания дизайнера, который это нарисовал :)

[Андрей Хохлов]

Дайте контакт дизайнера, добавлю в чёрный блокнот

[Mikhail Osher]

Дайте, пожалуйста, святую воду. Срочно нужно глаза закапать.

[Сергей delphinpro]

Ульрих, а за что его наказывать? Макет, как макет. Нестандартный, да. Надо думать над решением задачи.
Похоже верстальщики совсем обленились. Им бы верстать макеты только в стиле Material Design, или чтобы на Bootstrap ровненько ложилось.
А чуть шаг в сторону, сразу «расстрелять дизайнера».

[darksladen]

А вы сделали уже эту корявую кнопку? У меня тоже постоянно проблемы с этими изгибами =)

[Олег]

Сергей, Да наказывать не нужно, просто необходимо за такое брать в 5 раз больше от обычного прайса и все. Заказчик задумается, да и дизингер в итоге тоже (когда клиентов поубавиться). Разгадывать ребусы и верстать извращения можно в свободное время, а на работу нужно тратить как можно меньше ресурсов, сверху никто платить обычно не хочет и дело тут даже не в лени, ладно что-нибудь действительное крутое, чтобы можно было в портфолио положить, а на скрине убожество, это очень плохой дизайн.

[Сергей delphinpro]

Олег,

за такое брать в 5 раз больше от обычного прайса и все.

Да

Answer 1

[Ankhena]

clip-path https://webref.ru/layout/shapes-polygon/nutshell

Comments

[Kilila]

А разве clip-path не низко поддерживаем браузерами на данный момент?

[itsjustmypage]

Kilila, css да, а есть ещё такой внутри svg

[Ankhena]

Kilila, дизайнер должен иметь представления о свойствах CSS и их поддержке.
Также он может предоставить эти фрагменты в SVG.

И всегда можно использовать png, они от нас никуда не делись.

[Kilila]

Ankhena, уточните немного, а где именно там можно применить png-формат? Вроде же, если просто аккурат обрезанными кусками-блоками если вставить, то не очень адаптивно получится. Я не придираюсь, просто хочу узнать и разобраться в мелких деталях :)

[Ankhena]

Kilila, я бы уточнила, если бы вы уточнили как дизайнер видит макет для мобильных ;)

В общем случае - масштабируются png прекрасно или заменяются в media на меньшие по размеру.

[Kilila]

я бы уточнила, если бы вы уточнили как дизайнер видит макет для мобильных ;)

тяжела и неказиста жизнь начинающего верстальщика :(

[Ankhena]

Kilila, ну да, если в задании стоит сверстать адаптивно, а макетов нет и сам вестальщик не в состоянии придумать как это адаптировать, то первое что он должен сделать это пнуть дизайнера. Либо клиента или менеджера проектов.

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

[Александр Кузнецов]

https://codepen.io/geff21st/pen/qPgobZ вот пример с SVG. Поддержка хорошая. Правда, в IE есть проблемы с автоматическим вычислением высоты в зависимости от ширины (нужно оба измерения точно задавать в пикселях), в остальном, вроде бы проблем не было.

Answer 2

[Дмитрий]

Пример

Comments

[Kilila]

Разве clip-path не низко поддерживаем браузерами на данный момент?

[Дмитрий]

caniuse.com/#feat=css-clip-path

[Виталий]

В добавок, есть вот такое решение, может кому-то пригодиться: https://github.com/andrusieczko/clip-path-polygon

Answer 3

[Владимир Проскурин]

Такое чувство, что вы это вот этот друг странного дизайнера И как такое сверстать?

Answer 4

[EEclipsEE]

видел похожие реализации, с спомощью элементов :after и :before. Правда придется помучаться с вырезанием фона в ФШ. так как его придется собирать как пазл

Answer 5

[Михаил Лялин]

м.б., проще будет сделать общий "задник", а на его фоне задавать области для клика...

Comments

[Kilila]

Немного не понял, то есть все картинки в одну большую сварганить?))

[Михаил Лялин]

Kilila, да, а потом наложить карту кликов