Скошені краї блоків за допомогою 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-х робочих методів надання скошених кутів блокам.
Якщо дана стаття була вам корисна або ж якщо у вас є на прикметі інший робочий метод для додання скошеності блокам, напишіть про це в коментарях нижче.
Останні пости
Як вибрати ідеальний ноутбук: Повний гайд
Вибір ноутбука може бути складним завданням у світі, де ринок переповнений варіантами на будь-який смак… Читати далі
Томас Едісон
Наш великий недолік в тому, що ми занадто швидко опускаємо руки. Найбільш діючий метод досягти… Читати далі
Найкрасивіші та найбільш вражаючі мости з усього світу (ТОП-10)
Міст — це щось більше, ніж просто споруда, яка поєднує два береги. Для того, щоб… Читати далі
Соломон
Життя нас вчить, що свою пару ми пізнаємо, коли розлучаємося, своїх братів ми пізнаємо, коли… Читати далі
Річард Бах
Жодне бажання не дається тобі окремо від сили, що дозволяє його здійснити. Хоча, можливо, для… Читати далі