Как верстать блоки непрямоугольной формы?

Не давно начал заниматься версткой, и такой вопрос как верстать такие дизайны?
И такой главный вопрос, как делать не стандартные блоки? как на картинке=)
3b2031272b034f37a19ef9f3af21ec64.jpg
  • Вопрос задан
  • 1960 просмотров
Решения вопроса 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
linear-gradient() с наклоном (прямо в самом элементе) — IE 9+
border у псевдоэлементов — IE 7+
transform:skew() (также лучше у псевдоэлементов) — IE 9+
transform:skew() (у самого элемента, а внутренний элемент скосить в обратную сторону) — IE 9+
SVG (можно фоном, можно напрямую) — IE 9+

Update: по подсказке lioklio
transform:rotate() (у псевдоэлементов с увеличенной шириной и обрезкой в одном из предков) — IE 9+
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
bootd
@bootd Куратор тега CSS
Гугли и ты откроешь врата знаний!
Евгений Петров дал пожалуй самый лучший ответ, но, раньше, подобные вещи я бы сверстал иначе. Просто берем блок, вырезаем ему скошенный фон, а дальше нужные блоки отрицательно сдвигаем вверх. И что бы один оказался под другим, просто даем position: relative и z-index.

Зато - кроссбраузерно!
Ответ написан
alexgl2004
@alexgl2004
transform:skew для псевдо пока рано IE8 еще в ходу.
Ответ написан
Комментировать
lioklio
@lioklio
transform: rotate - почему бы нет ...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы