Как сверстать диагональный фон?

Добрый! Возникла следующая задача вот пример участка страницы где есть фон нестандарной(непрямоугольной формы) Как его лучше реализовать, 3d трансформация, SVG, ваш вариант?

1 ответов


Вариант на обычных PNG-картинках — все блоки прямоугольные, только фон у них сделан так, чтобы визуально казалось, что блоки не прямоугольные.

Тут два развития событий:

  1. либо мы делаем для верхнего и нижнего блоков фон просто картинками, обрезанными сверху/снизу под определенным углом и с полупрозрачностью
  2. либо делаем для среднего блока фон просто картинкой с обрезанной верхней и нижней частью и с полупрозрачностью
В первом варианте темный блок с паттерном будет самым обычным прямоугольным блоком с background-repeat'ом и он будет находиться позади верхнего и нижнего блоков.

Во втором варианте верхний и нижний блоки и фон для них будут самыми обычными, а средний блок будет картинкой (паттерн и background-repeat уже не получатся). Придется пожертвовать тенью у кнопки, ибо она будет налезать на нижний блок.

Ну и корректируете отступы margin'ами и padding'ами.

Можно через псевдоэлементы и border, работает от ИЕ8.
Примеры:
http://htmlbook.ru/blog/treugolniki-cherez-css
http://habrahabr.ru/post/126207/