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

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

Пример      Скачать

---

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

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

<div class="box">
                <div class="inner">   
                                <div class="content"><img src="img.jpg" alt="my bike" /></div>
                </div>
</div>

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

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

/* angled box styles */
.box{
 width:700px;
 height:300px;
 background:#ccc;
 overflow:hidden;
 margin:1em 0;
 }
.box .inner{
 -moz-transform:rotate(20deg);
 -webkit-transform:rotate(20deg);
 -o-transform:rotate(20deg);
 width:300px;
 height:450px;
 margin-top:-70px;
 margin-right:100px;
 overflow:hidden;
 background:#aaa;
 float:right;
 border:3px solid #fff;
 }
.box .inner .content{
 -moz-transform:rotate(-20deg);
 -webkit-transform:rotate(-20deg);
 -o-transform:rotate(-20deg);
 width:500px;
 height:320px;
 margin-top:60px;
 margin-left:-80px;
 overflow:hidden;
 background:#f1f1f1;
 }

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

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

---

Источник: Angled content mask with CSS

---