Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 15.08.2022)
43750
солдат
233
самолетов
195
вертолетов
1876
танков
4141
ББМ
985
артиллерия
136
ПВО
261
РСЗО
3044
машин
15
корабли и катера
Скошенные края блоков с помощью CSS-масок и трансформаций

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

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

 

 

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

Добавить комментарий

Ваш адрес email не будет опубликован.