Неровный бэкграунд

В общем возник вопрос по реализации так называемого “кривого” бэкграунда на странице.

Верстал себе, верстал и тут наткнулся на “китчен-мастер” из рассылки и задался как правильно реализовывать подобные “финты” с неровным фоном?

Вот неплохой пример: http://pcvector.net/scripts/layout_and_interface/242-skoshennye-elementy-na-css3.html
По крайней мере очень похоже на то, что необходимо вам.
Вот еще: http://codepen.io/cleric/pen/WvRBpP

Еще варианты будут?

Мне например легче реализовать это все с помощью псевдокласса before/after вставив эту срезанный треугольник :))

Интересует мнение тех, кто верстал данный макет ибо он из рассылки :slightly_smiling: Самый жесткий вариант конечно это тупо цельной картинкой.

Еще наверно можно псевдоклассом, но не срезанный треугольник, а обычный прямоугольный блок немного наклонить transform: totate(45deg)

Дело в том, что если наклонять прямоугольный блок допустим при 100% ширине, то появляется не совсем ровный срез по бокам, а с огрызками в цвет основного фона, что в этом случае? Вот на скрине видны проушины в цвет фона (черный).

А если ему размер больше сделать? А блоку-родителю задать overflow: hidden;

Попробуй темный крутить, а под ним залей тем же цветом. Не будут края видны

codepen.io/anon/pen/gPJNov
А если так?

1 лайк