Скошені краї блоків за допомогою 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-х робочих методів надання скошених кутів блокам.
Дивитись Pen Скошені краї блоків за допомогою CSS-масок і трансформацій від ZAnatoly (@ZAnatoly) на CodePen.
Якщо дана стаття була вам корисна або ж якщо у вас є на прикметі інший робочий метод для додання скошеності блокам, напишіть про це в коментарях нижче.