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

Question

[Adilet Zhuman]

Не давно начал заниматься версткой, и такой вопрос как верстать такие дизайны?
И такой главный вопрос, как делать не стандартные блоки? как на картинке=)

Answer 1

[Евгений Петров]

linear-gradient() с наклоном (прямо в самом элементе) — IE 9+
border у псевдоэлементов — IE 7+
transform:skew() (также лучше у псевдоэлементов) — IE 9+
transform:skew() (у самого элемента, а внутренний элемент скосить в обратную сторону) — IE 9+
SVG (можно фоном, можно напрямую) — IE 9+

Update: по подсказке lioklio
transform:rotate() (у псевдоэлементов с увеличенной шириной и обрезкой в одном из предков) — IE 9+

Comments

[Станислав Черенков]

При встрече со старыми версиями эксплорера можно деградировать с SVG до VML, и тогда будет IE 5+.

[Евгений Петров]

Станислав Черенков: Для VML потребуется включать код в разметку. Но, самое важное, что IE8 и ниже уже нет смысла поддерживать ни по деньгам, ни по усилиям:)

Если говорить про деградацию, то, в случае необходимости поддержки старых ослов, лучше идти по пути деградации дизайна. И визуально, и функционально, и даже по объёму (да, дизайн — это же не картинки:).

[Станислав Черенков]

Евгений Петров: Можно разместить разметку VML внутри IE lt 8, рядом с SVG. И да, несмотря ни на что, некоторые компании считают это всё ещё целесообразным. :)

[vladHD]

Евгений Петров: с бордерами у псевдоэлементов не получается адаптивности, ведь бордер то в пикселях задаю. с фоном тоже не очень вариант, ибо если захотят расширить контент то оно вылезет за картинку. с градиентомчесно говоря не понял, остается вариант с трансформациями.

[Евгений Петров]

vladHD: Какое отношение имеет эта тема к вашему вопросу Верстка страницы с фонами неправильной формы?
Прекратите спамить. Не поняли — изучайте спецификации, статьи читайте.

[vladHD]

да никакое, темы перепутал, там продублировал вопрос, сорри)

Answer 2

[Дима Паутов]

Евгений Петров дал пожалуй самый лучший ответ, но, раньше, подобные вещи я бы сверстал иначе. Просто берем блок, вырезаем ему скошенный фон, а дальше нужные блоки отрицательно сдвигаем вверх. И что бы один оказался под другим, просто даем position: relative и z-index.

Зато - кроссбраузерно!

Comments

[Mikhail Osher]

ie10+ поддерживает все нормальные css3

[Дима Паутов]

Mikhail Osher: а 7, 8, 9?

[Mikhail Osher]

Дима Турков: в пекло.

[Дима Паутов]

Mikhail Osher: Если бы заказчики считали бы так же, то я за!

[Mikhail Osher]

Дима Турков: не повезло.) Я сам решаю, какие технологии использовать и какие браузеры поддерживать. Проявляйте больше настойчивости, и приводите аргументы.

[Сергей delphinpro]

Дима Турков:
>а 7, 8, 9?
а эти вполне могут обойтись обычными прямоугольниками. graceful degradation.

[Евгений Петров]

Mikhail Osher: В пекло короля. В пекло Королевскую гавань.

[Евгений Петров]

Дима Турков: IE9 поддерживает практически всё из перечисленного, а border так и вовсе с поддержки transparent цвета — IE7.

[Дима Паутов]

Mikhail Osher: Я вас прекрасно понимаю. Но у меня были клиенты, которые лично сидели на ie8. Реже на ie7! А раз деньги заплатили, то человек хочет видеть то, что нарисовано в макете!
Сергей: А что если заказчику плевать, есть и упертые люди, которые не хотят менять свой браузер?

[Дима Паутов]

Евгений Петров: ну на 1 меньше.

[Евгений Петров]

Дима Турков: Так этого вполне хватит, чтобы реализовать, не прибегая к картинкам:)
А если кто хочет под старые, то за IE8 по прайсу двойная цена. IE7 в принципе уже никто не будет поддерживать.

[Дима Паутов]

Евгений Петров: Двойная цена? Эх, мне ведать не доплачивают))) Вообщем, я привел пример тз на моей работе. Там прописаны такие строчки ie7+ и все!

[Евгений Петров]

Дима Турков: Это значит ровно то, что ТЗ написали идиоты, не ценящие время и деньги.

[Дима Паутов]

Евгений Петров: Я тоже так думаю, но вот начальству пока это не хочу в лицо говорить)))

Answer 3

[Алексей]

transform:skew для псевдо пока рано IE8 еще в ходу.

Answer 4

[lioklio]

transform: rotate - почему бы нет ...

Comments

[Евгений Петров]

Можно. Лучше у псевдоэлемента с большей шириной и обрезкой у родителя.