Скошені краї блоків за допомогою 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-х робочих методів надання скошених кутів блокам.

Якщо дана стаття була вам корисна або ж якщо у вас є на прикметі інший робочий метод для додання скошеності блокам, напишіть про це в коментарях нижче.