Не давно начал заниматься версткой, и такой вопрос как верстать такие дизайны?
И такой главный вопрос, как делать не стандартные блоки? как на картинке=)
linear-gradient() с наклоном (прямо в самом элементе) — IE 9+ border у псевдоэлементов — IE 7+ transform:skew() (также лучше у псевдоэлементов) — IE 9+ transform:skew() (у самого элемента, а внутренний элемент скосить в обратную сторону) — IE 9+ SVG (можно фоном, можно напрямую) — IE 9+
Update: по подсказке lioklio transform:rotate() (у псевдоэлементов с увеличенной шириной и обрезкой в одном из предков) — IE 9+
Станислав Черенков: Для VML потребуется включать код в разметку. Но, самое важное, что IE8 и ниже уже нет смысла поддерживать ни по деньгам, ни по усилиям:)
Если говорить про деградацию, то, в случае необходимости поддержки старых ослов, лучше идти по пути деградации дизайна. И визуально, и функционально, и даже по объёму (да, дизайн — это же не картинки:).
Евгений Петров: Можно разместить разметку VML внутри IE lt 8, рядом с SVG. И да, несмотря ни на что, некоторые компании считают это всё ещё целесообразным. :)
Евгений Петров: с бордерами у псевдоэлементов не получается адаптивности, ведь бордер то в пикселях задаю. с фоном тоже не очень вариант, ибо если захотят расширить контент то оно вылезет за картинку. с градиентомчесно говоря не понял, остается вариант с трансформациями.
Евгений Петров дал пожалуй самый лучший ответ, но, раньше, подобные вещи я бы сверстал иначе. Просто берем блок, вырезаем ему скошенный фон, а дальше нужные блоки отрицательно сдвигаем вверх. И что бы один оказался под другим, просто даем position: relative и z-index.
Дима Турков: не повезло.) Я сам решаю, какие технологии использовать и какие браузеры поддерживать. Проявляйте больше настойчивости, и приводите аргументы.
Mikhail Osher: Я вас прекрасно понимаю. Но у меня были клиенты, которые лично сидели на ie8. Реже на ie7! А раз деньги заплатили, то человек хочет видеть то, что нарисовано в макете! Сергей: А что если заказчику плевать, есть и упертые люди, которые не хотят менять свой браузер?
Дима Турков: Так этого вполне хватит, чтобы реализовать, не прибегая к картинкам:)
А если кто хочет под старые, то за IE8 по прайсу двойная цена. IE7 в принципе уже никто не будет поддерживать.
Средний
Простой
