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

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

Tags: CSS3HTML5

Recent Posts

Опалення і гаряча вода коли треба, а не коли включать

Тепло в домі і гаряча вода в будь-який час для багатьох мешканців багатоквартирних та приватних… Read More

19/09/2020

Що краще: цифрове телебачення Т2 чи інтернет-телебачення

Сучасне життя неможливо уявити без телебачення. Воно дозволяє дізнаватися про події в Україні та світі,… Read More

02/09/2020

Гіпоалергенна подушка. Чому вона важлива?

Зараз знайдеться мало людей, в яких немає алергії на продукти або пилок рослин. Вважається, що… Read More

28/08/2020

Футбольний Інстаграм – що нового у топових футболістів

Деякі відомі футболісти ретельно приховують свої особисте життя, а інші – активно постять фотографії з… Read More

24/08/2020

Види та типи компресійних панчіх

Вироби називають компресійними, коли їх застосовують для лікування, а також профілактики порушень кровотоку в нижніх… Read More

22/08/2020

Як правильно замінити оливу у двотактному гідроциклі?

Гідроцикли – це класний плавзасіб, який може подарувати вам незліченні години приємного проведення часу на… Read More

19/08/2020