Nikolay Talanov: а что не так с советом? 2016, а тут до сих пор пишут, что ие8 и меньше 320px нужно верстать! Так вот если такое вот, не иначе как картинкой и делать!!!
1) Серый css-треугольник с помощью :after.
2) Css clip-path (не пашет в ие и ФФ)
3) Svg clip-path (слегка геморройно и не очень легко сделать идеально растягиваемым под все разрешения с сохранением пропорций).
4) Еще есть варианты с псевдоэлементами и трансформами (skew/rotate и так далее), с помощью которых можно юзать не только монотонный бэкграунд, но и картинки. На тостере уже миллион раз подобные вопросы были.
1 - исключаем по условиям автора, что треугольники ему не нужны.
2, 3 - поддержка браузерами практически нулевая, стоит задуматься, имеет ли смысл.
4 - слишком размытый ответ, см. ниже.
Вообще, ответ из серии "Я всё знаю, потому что я крут, но вам ничего не скажу".
Фактически, в ответе ноль полезной информации.
Sergey Goryachev: у 3 почти нулевая поддержка? Товарищ, покиньте пожалуйта помещение и перестаньте нести чушь, хватит показывать всем что вы ничего не знаете и не умеете.
MegaSanchez: гуглите svg clipPath. Год+ назад делал такую демку codepen.io/suez/pen/QwoLBZ
Даже параллакс имеется (хреновый, в описании есть инфа). Но вам проще сделать как описано в варианте 4. Юзаете комбинацию из skew и rotate, работать будет везде, без проблем тянуться на всех разрешениях и так далее.
