Как создать скошенные края с помощью CSS

В этой статье мы рассмотрим, как мы можем создать эффект углового края (по горизонтали) на веб-странице. По сути, это выглядит примерно так:

Наличие слегка наклоненного края должно сделать наш веб-макет менее жестким и скучным. Чтобы сделать этот трюк, мы будем использовать псевдо-элементы ::до а также ::после а также CSS3 Transform.

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

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

 .блок высота: 400 пикселей; ширина: 100%; положение: относительное; фон: линейный градиент (справа, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%);  .block :: after content: "; ширина: 100%; высота: 100%; позиция: абсолютная; фон: наследование; z-индекс: -1; низ: 0; источник преобразования: левый нижний; преобразование: косоеY (3deg); 

Подведем итоги.

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

преобразование: асимметрия (3 градуса); делает ::после перекос блока или угол на 3 градуса. Поскольку мы указали начальную координату как левый нижний угол, нижний правый угол блока увеличивается на 3 градуса. Если мы поменяем преобразовании координат в правый нижний и нижний левый угол будет поднят на 3 градуса вместо.

Вы можете добавить однотонный фон или градиент, чтобы увидеть результат.

Сделай это проще с Sass Mixin

Чтобы сделать это проще, я создал миксин Sass для добавления угловых граней, за исключением головной боли от сложности правил стиля. С помощью следующего миксина вы можете быстро указать сторону - верхний левый, верхний правый, нижний левый или нижний правый - для перекоса.

 @mixin angle-edge ($ pos-top: ноль, $ angle-top: ноль, $ pos-btm: ноль, $ angle-btm: ноль) ширина: 100%; положение: относительное; фон: линейный градиент (справа, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); & :: before, & :: after content: "; ширина: 100%; высота: 100%; позиция: абсолютная; фон: наследовать; z-индекс: -1; переход: облегчить все .5s; @if $ pos-top & :: before @if $ pos-top == 'topleft' top: 0; transform-origin: правая верхняя часть; transform: skewY ($ angle-top); @if $ pos-top = = 'topright' top: 0; transform-origin: слева top; transform: skewY (- $ angle-top); @if $ pos-btm & :: after @if $ pos-btm == 'bottomleft' bottom: 0; transform-origin: справа внизу; transform: skewY (- $ angle-btm); @if $ pos-btm == 'bottomright' bottom: 0; transform-origin: слева внизу; transform: skewY ($ angle-btm); 

В миксине четыре переменные. Первые две переменные, $ Поз-топ а также $ Угол сверху, указать верхняя начальная координата и степень. Последние две переменные определяют координировать и степень для низ боковая сторона.

Если вы заполните все четыре переменные, вы можете наклонить обе стороны - верх и низ - элемента.

Используйте Sass @включают синтаксис для вставки миксина в элемент. Вы можете увидеть примеры ниже:

Добавить скошенный край на верхний левый боковая сторона:

 .block @include angle-edge (topleft, 3deg);  

Добавить скошенный край на Нижний правый боковая сторона:

 .block @include angle-edge (bottomright, 3deg);  

Добавить скошенный край на верхний левый а также Нижний правый боковая сторона:

 .block @include angle-edge (верхний край, 3 градуса, нижний правый угол, 3 градуса);  

Ниже приведена демонстрация с примененными миксинами. Измените поле выбора, чтобы переключиться на другой стиль.

это оно!