Як створити скошені ребра з CSS

У цій публікації ми розглянемо, як можна створити кутовий ефект краю (горизонтально) на веб-сторінці. В основному, це виглядає приблизно так:

Маючи трохи кутовий край, наша веб-макета повинна виглядати менш жорсткою і нудною. Щоб зробити цей трюк, ми будемо використовувати псевдоелементи :: раніше і :: після і CSS3 Transform.

Використання псевдоелементів

Ця техніка використовує псевдоелементи :: раніше і :: після для нахилу країв елемента. У цьому прикладі ми будемо коригувати нижній край.

 .блок висота: 400px; ширина: 100%; позиція: відносна; фон: лінійно-градієнтний (праворуч, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); ширина: 100%; висота: 100%; позиція: абсолютна; фон: успадковувати; z-індекс: -1; дно: 0; перетворення-початок: ліве нижнє; перетворення: skewY (3deg); 

Давайте повторимо.

The перетворення-походження вказує координати елемента, який ми хочемо перетворити. У наведеному вище прикладі ми вказали ліворуч які ставлять початкові координати в нижньому лівому куті блоку.

The transform: skewY (3deg); робить :: після блок перекосу або кут на 3 градуси. Оскільки ми задали початкову координату внизу ліворуч, нижній правий блок піднімає на 3 градуси. Якщо ми поміняємо перетворення-походження до праворуч а нижній лівий кут буде піднято на 3 градуси.

Ви можете додати суцільний колір або градієнт, щоб побачити результат.

Зробити це легше з Sass Mixin

Щоб зробити це простіше, я створив Sass mixin, щоб додати кутові ребра, за винятком головних болів при вирішенні складності правил стилю. За допомогою наступного змішування ви можете швидко вказати сторону - зверху-вліво, вгорі-вправо, внизу-вліво або знизу-вправо-для перекосу.

 @mixin angle-edge ($ pos-top: null, $ angle-top: null, $ pos-btm: null, $ angle-btm: null) ширина: 100%; позиція: відносна; фон: лінійно-градієнтний (праворуч, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); & :: before, & :: after content: "; width: 100%; висота: 100%; позиція: абсолютна; фон: inherit; z-index: -1; перехід: простота all .5s; @if $ pos-top & :: before @if $ pos-top == 'topleft' top: 0; перетворення-початок: праворуч; transform: skewY ($ angle-top); @if $ pos-top = = 'topright' top: 0; transform-origin: left 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); 

У змішуванні є чотири змінні. Перші дві змінні, $ pos-top і $ angle-top, вкажіть верхня початкова координата і ступеня. Останні дві змінні визначають координати і ступеня для знизу сторони.

Якщо ви заповните всі чотири змінні, ви можете нахиляти обидві сторони - зверху і знизу - елемент.

Використовуйте Sass @включати Синтаксис для вставки змішування в елемент. Приклади нижче:

Щоб додати перекіс на зверху ліворуч сторона:

 .блок @ включити кут-край (topleft, 3deg);  

Щоб додати перекіс на внизу праворуч сторона:

 .блок @ включити кут-край (знизу праворуч, 3deg);  

Щоб додати перекіс на зверху ліворуч і внизу праворуч сторона:

 .блок @ включити кут-край (topleft, 3deg, bottomright, 3deg);  

Нижче наведено демонстраційну версію, до якої застосовано міксини. Змініть поле вибору, щоб переключитися на інший стиль.

Це воно!