В этом уроке мы рассмотрим создание эффекта горизонтальных краев под углом на веб-странице. Если в макете есть немного непараллельные края, он выглядит менее жестким и скучным. Для создания этого эффекта мы воспользуемся псевдоэлементами ::before и ::after и трансформациями CSS3.

Использование псевдоэлементов

В этом способе псевдоэлементы ::before и ::after используются для создания непрямых углов у элемента. В примере ниже мы сделаем нижний край непараллельным верхнему:

.block{
    height: 400px;
    width: 100%;
    position: relative;
    background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
}
.block::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: inherit;
    z-index: -1;
    bottom: 0;
    transform-origin: left bottom;
    transform: skewY(3deg);
}

Давайте подведем итоги.

Свойство transform-origin  задает координаты элемента, которые нужно трансформировать. В примере выше мы задали эти координаты как left bottom , и это поместило координаты начала трансформации в левый нижний угол блока.

Свойство transform: skewY(3deg); скосит угол блока ::after на 3 градуса. Так как мы задали координаты начала как левый нижний угол, то правый нижний угол блока поднимется на 3 градуса. Если мы изменим значение свойства начала трансформации на right bottom, то левый нижний угол поднимется на 3 градуса.

Можно добавить непрозрачный цвет фона или градиент, чтобы увидеть результат:

Создание нескольких скошенных углов 

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

.block {
  width: 100%;
  position: relative;
  background: linear-gradient(to right, #f1e767 0%, #feb645 100%);
}
.block:before, .block:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  z-index: -1;
}
.block:before {
  top: 0;
  transform-origin: left top;
  transform: skewY(-3deg);
}
.block:after {
  bottom: 0;
  transform-origin: left bottom;
  transform: skewY(3deg);
}

Также для упрощения можно использовать предпроцессоры CSS, например, Sass. Посмотрите, как скашиваются углы в примере ниже:

Это все. Надеемся, Вам понравился этот урок и он Вам пригодится.

Автор урока Agus Eko Setiyono

Перевод — Дежурка

Смотрите также: