Скошенные края блоков с помощью 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-х рабочих методов придания скошенных углов блокам.

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