Вот иногда, смотря на такие работы, хочется расстрелять дизайнеров.
Не думаю, что найдется кроссбраузерное и адаптивное решение на чистом css.
Можно поиграться с SVG, но придется сильно заморочиться над адаптивностью.
Я бы делал картинками. Так будет удобней всего.
Такие дизайнеры обычно не понимают как это всё верстается. В общем, на расстрел! Всё же картинками не есть Good. Лучше отставить в сторону старые браузеры и воспользоваться css3 возможностями. Ну, как всегда, ИМХО :)
Иван Стройкин: Ну, не всё, конечно картинками.
Тут часть элементов нормально верстается обычнми псевдоэлементами.
Картинкой тут только нижний блок, где обрезанная картинка.
Вот чтобы обрезать ее так, нужно применять svg, это и есть гемор.
А с остальным проблем не вижу)
Semmy_99: вот как делаются такие треугольники apps.eky.hk/css-triangle-generator
Но на нижнем блоке это не реализовать, из-за переходящего фона, там придется либо картинкой, либо как-то иначе)
Semmy_99: для реализации нижнего блока можно попробовать накладывать несколько фонов. Вниз "завитки", на них 2 белых "треугольника" с помощью градиентов.
Semmy_99: ну, если ты учёл, что он еле-еле работает в браузерах и не работает в ие, то да, можно и его. Я же писал сразу, кроссбраузерного варианта нет. А клип-пач я редко использую,
На самом деле это было тестовое задание, которое я к сожалению провалил)
Да и я пробовал позиционировать и накладывать изображения друг на друга,картина откровенно говоря ужасающая,все держится на соплях ,как спичечный домик и малейшее изменение ширины вся верстка катится к черту.В общем пришел к выводу, что проще сделать с узором срезанным таким с помощью clip, а те браузеры ,в которых не видно этого пусть видят лучше прямые углы , но адаптивную верстку , в любом случае ваш ответ правильный. Спасибо за помощь.
Semmy_99: Кстати, нашел в своих старых записях такой вариант - https://jsfiddle.net/snewrjjr/ - если интересно, как сделать черный треугольник, адаптивно и красиво. Насколько я помню, он везде работает. Ну, просто для общей информации))
