Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 28.03.2024)
439970
солдат
347
самолетов
325
вертолетов
6914
танков
13237
ББМ
10963
артиллерия
729
ПВО
1021
РСЗО
14595
машин
26
корабли и катера
Скошенные края блоков с помощью 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-масок и трансформаций

Добавить комментарий для Leggka Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *