Підступна війна росії проти України. Орієнтовні втрати ворога
(станом на 06.10.2022)
61330
осіб
264
літаків
225
гелікоптерів
2449
танків
5064
ББМ
1424
артилерія
176
ППО
344
РСЗВ
3854
машин
15
кораблі і катери
Скошені краї блоків за допомогою CSS-масок і трансформацій

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

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

 

 

Напишіть тут свою думку/питання

Ваша пошта не публікуватиметься.