Как сверстать блок нестандартной формы с фоновыми изображениями?
Ден добрый всем. Подскажите (или, если есть примеры верстки, то накидайте пожалуйста), каким образом можно сверстать такой пример?
Находил примеры подобные: jsbin.com/ketoluheji/1/edit , но это же не то.
Ульрих, а за что его наказывать? Макет, как макет. Нестандартный, да. Надо думать над решением задачи.
Похоже верстальщики совсем обленились. Им бы верстать макеты только в стиле Material Design, или чтобы на Bootstrap ровненько ложилось.
А чуть шаг в сторону, сразу «расстрелять дизайнера».
Сергей, Да наказывать не нужно, просто необходимо за такое брать в 5 раз больше от обычного прайса и все. Заказчик задумается, да и дизингер в итоге тоже (когда клиентов поубавиться). Разгадывать ребусы и верстать извращения можно в свободное время, а на работу нужно тратить как можно меньше ресурсов, сверху никто платить обычно не хочет и дело тут даже не в лени, ладно что-нибудь действительное крутое, чтобы можно было в портфолио положить, а на скрине убожество, это очень плохой дизайн.
Ankhena, уточните немного, а где именно там можно применить png-формат? Вроде же, если просто аккурат обрезанными кусками-блоками если вставить, то не очень адаптивно получится. Я не придираюсь, просто хочу узнать и разобраться в мелких деталях :)
Kilila, ну да, если в задании стоит сверстать адаптивно, а макетов нет и сам вестальщик не в состоянии придумать как это адаптировать, то первое что он должен сделать это пнуть дизайнера. Либо клиента или менеджера проектов.
"Если б я была царица" я бы не стала это параллельно масштабировать, а переделала бы эти блоки на ровные прямоугольники или скошеные параллелограммы или "домиками", но в любом случае во что-то попроще чем сейчас.
А что в голове у вашего дизайнера я не знаю, даже думать боюсь.
https://codepen.io/geff21st/pen/qPgobZ вот пример с SVG. Поддержка хорошая. Правда, в IE есть проблемы с автоматическим вычислением высоты в зависимости от ширины (нужно оба измерения точно задавать в пикселях), в остальном, вроде бы проблем не было.
видел похожие реализации, с спомощью элементов :after и :before. Правда придется помучаться с вырезанием фона в ФШ. так как его придется собирать как пазл
Простой
