Angled content mask with CSS

Маска контента под углом на CSS

В этой статье мы вам покажем, как можно создать маску контента, расположенную под углом, используя только CSS.

Идея очень проста и заключается в использовании свойства CSS transform (rotate (поворот) более точно). Конечно же, эффект будет только в тех браузерах, которые поддерживают этой свойство.

Идея, как уже упоминалось, довольно проста. У нас есть 3 вложенных элемента. На верхнем уровне контейнер определенного размера, как основа. Второй элемент будет повернут на X градусов (по часовой стрелке) и третий элемент будет повернут на -X градусов (против часовой стрелки). Посмотрите на изображение ниже, чтобы лучше понять идею.

HTML верстка выглядит вот так:

Старый добрый CSS

Отметим наиболее важные моменты. Свойство overflow необходимо на всех 3 элементах (в прочем, вы можете не ставить его на 3 элементе). Первый элемент не поворачивается и у него фиксированные ширина и высота. Второй элемент поворачивается по часовой стрелке и третий против часовой стрелки на то же значение градусов.

Вам прийдется поиграть со свойством margin, чтобы все выглядело идеально. В примере показаны основы, не дизайн, так что вы можете оформить этот блок на свой вкус.

Такой трюк очень хорошо работает на изображениях, но и текстовое содержание не запрещено.

Еще раз напомним, что прийдется поработать со свойством margin, чтобы получить наилучший результат. Также не забывайте про браузеры, которые не поддерживают повороты на CSS.


5 комментариев на “Маска контента под углом на CSS

  1. Было бы здорово, если бы все браузеры понимали такие фокусы. А иначе для остальных все равно придется придумывать другой способ реализации. И тогда вопрос, а зачем тогда писать 2 разных набора кода.

    Thumb up 0 Thumb down 0

    • Чтобы обеспечить наилучший вид сайта в наибольшем количестве браузеров.

      Thumb up 0 Thumb down 0

  2. Наибольшее количество «браузера» — это IE (почти 80% пользователей на данный момент используют IE8) — а он это непоймет. Поэтому остается вариант изображений...

    Thumb up 0 Thumb down 0

    • ИЕ8 О_о?!?! Пользователи Ие — это как болельщики Анжи: вроде их дохрена, но среди моих друзей таких идиотов нет. Кокой ие?! Максимум процентов 20 на нём сидит. Он мало того, что тормозной, так ещё и самый уязвимый. 80% — это Опера+Мозила+Хром.

      Thumb up 0 Thumb down 0

  3. В тему о браузеров. Откуда 80% От поисковиков, в которые заходят владельцы вновь установленной винды в поисках нормального браузера. То-биш 80% людей ищут первым делом в поисковике браузер получше, но ищут его из под IE. А так им пользуются разве что убогие

    Thumb up 0 Thumb down 0

Оставить комментарий