Скошенные края блоков с помощью CSS-масок и трансформаций

С помощью угловатых, скошенных краев у различных html-элементов (картинок, блоков, целых секций) можно придать уникальный вид любой веб-странице. В этой статье мы рассмотрим практические примеры того, как легко можно добавить скошенные края любому html-элементу с помощью простых методик CSS-масок и CSS-трансформаций.

 

 

Чтобы создать углы для краев элементов с помощью CSS трансформаций обычно приходится «перекашивать» родительский элемент, а затем «отвязывать» дочерний элемент, но такой метод имеет ряд лишних ограничений. А что делать, если нужно применить более кастомизированный эффект: добавить скошенные углы только одному краю, например, только с правой стороны блока и от верхнего к нижнему краю? Оказывается, есть еще несколько способов для этого.

 

 

clip-path (маскирование, область отсечения) в CSS3

Первым и самым простым вариантом является использование CSS свойства clip-path. Пример кода:

 

.img {    display: block;    position: relative;    background: #1395ba;    width: 500px;    height: 250px;    margin: 50px;    -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);  }  

 

Этот код присваивает обтравочную маску блоку и фактически скрывает его нижний край под небольшим углом (10о). Это довольно простой и рабочий метод. Единственным недостатком для свойства clip-path в CSS3 является поддержка браузерами. Полностью свойство поддерживает только Firefox, частично поддерживают Webkit-браузеры и полностью не поддерживают IE, Edge и Opera Mini.

 

 

Сгенерированный контент с помощью CSS3

Второй метод заключается в использовании сгенерированного (с помощью псевдоэлементов :after и :before) и перекошенного содержимого. Этот метод отлично работает на блоках со сплошным фоновым цветом.



Пример кода:

 

.block {    background: #2499d5;    position: relative;    z-index: 1;    width: 500px;    height: 250px;    margin: 50px;  }    .block:after {    background: inherit;    bottom: 0;    content: '';    display: block;    height: 50%;    left: 0;    position: absolute;    right: 0;    transform: skewY(-5deg);    transform-origin: 100%;    z-index: -1;  }  

 

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

 

Чтобы добавить еще один скошенный край в верхней части элемента, достаточно добавить псевдоэлемент :before, перенеся его точку поворота в правый верхний угол и повернув блок на 5 градусов.

Пример кода:

 

.block:before {    background: inherit;    bottom: 0;    content: '';    display: block;    height: 50%;    top: 0;    position: relative;    right: 0;    transform: skewY(5deg);    transform-origin: 100%;    z-index: -1;  }  

 

Этот метод имеет лучшую за предыдущий метод поддержку браузерами, и отлично подходит для блоков с однотонным фоном.

 

 

Самый скучный метод

Ну и третий, самый скучный метод – это создание фоновых картинок с прорисованными углами. Но никто так уже не делает в XXI веке (шутка).

 

 

Демо-пример 2-х рабочих методов придания скошенных углов блокам.
Смотреть Pen Скошенные края блоков с помощью CSS-масок и трансформаций от ZAnatoly (@ZAnatoly) на CodePen.

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