Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

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

15 декабря 2015 | Опубликовано в css | 3 Комментариев »

В этом уроке мы рассмотрим создание эффекта горизонтальных краев под углом на веб-странице. Если в макете есть немного непараллельные края, он выглядит менее жестким и скучным. Для создания этого эффекта мы воспользуемся псевдоэлементами ::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

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

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




Комментарии

  1. иван
    Thumb up Thumb down +1

    Впринципе полезно, но есть не состыковки в тексте и в коде, и некоторых свойств не хватает. Например здесь .block:before {

    top: 0;

    transform-origin: left top;

    transform: skewY (-3deg);

    }

    Для основного блока .block тогда необходимо добавить margin-top иначе не видно как меняется угол. Почему то в коде ниже это есть, а в тексте не написали. Ну это мелочи, просто мне как новичку пришлось попотеть, прежде чем понять в чем дело))

    Ответить

  2. V
    Thumb up Thumb down 0

    А что нужно изменить, чтобы углы скашивались не слево направо, а наоборот? Чтобы и сверху и снизу одинаково. Никак не могу сообразить. Спасибо!

    Ответить

    A Ответ:

    Thumb up Thumb down 0

    transform-origin: left bottom;

    Ответить

Оставить ответ


пять − 4 =

Вставить изображение