Скошені краї блоків за допомогою 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-х робочих методів надання скошених кутів блокам.
Якщо дана стаття була вам корисна або ж якщо у вас є на прикметі інший робочий метод для додання скошеності блокам, напишіть про це в коментарях нижче.
This post was last modified on 26/06/2017 18:22
Останні пости
Генрі Форд
Людина має два мотиви поведінки — один справжній та інший, що гарно звучить Генрі Форд…
Фрідріх Ніцше
Не треба додумувати надто багато. Так ви створюєте проблеми, яких не існувало Фрідріх Ніцше
Такий різний інвертор! Вибираємо між кондиціонерами Inverter, Inverter DC та Full DC
Літо в розпалі, а значить якраз час задуматися про покупку кондиціонера. Але як не загубитися…
Корисні поради щодо вибору розсувних дверей
Варто знати, що функціональність і дизайн працюють рука об руку, коли ви використовуєте розсувні двері.…