Трансформація і маски CSS: похилі краю

13

Від автора: у даній статті ми поговоримо про трансформаціях і масках css. Під час візуального перегляду сторінки похилі краю елементів можуть справити враження. Хоч такий підхід не поширений, але ми вирішили використовувати його на сайті The National Trust for Historic Preservation. До різним елементам ми застосували різні похилі краю: де-то нижні краї широкоформатних зображень, десь нижні або верхні краї блоків з текстом з суцільним фоном.

Трансформація і маски CSS: похилі краю

Приклад 1: Зображення з нижнім кутовим краєм і суцільний блок з верхнім краєм

Трансформація і маски CSS: похилі краю

Приклад 2: Блок з суцільним фоном і нижнім кутовим краєм

Трансформація і маски CSS: похилі краю

Приклад 3: Блок з суцільним фоном і обома скошеними краями

Ефект нахилу в основному досягається за допомогою CSS трансформацій за рахунок нахилу однієї з сторін батьківського елемента і вирівнювання дочірнього елемента. Але цю техніку можна застосовувати тільки для паралельних кутів. Якщо потрібно застосувати до окремих сторін свою трансформацію тільки до однієї стороні, на верхній і нижній гранях з протилежними кутами або до зображення? На щастя, є кілька способів.

CSS clip-path

Перший і найпростіший спосіб це CSS clip-path. В якості прикладу ми взяли велику банерне зображення.

.hero-image__figure img {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
}

Так ми поставили область обрізання зображення, фактично приховавши нижню межу під невеликим кутом. На блоках з фоновим зображенням також варто властивість clip-path. На відміну від зображення, висота даного блоку змінюється на відміну від розміру екрану пристрою. Щоб підтримувати правильний кут на різних екранах (не дуже крутий) потрібно прописати значення для кожної координати Х для всіх екранів.

.promo {
-webkit-clip-path: polygon(0 0, 1600px 0, 1600px 87%, 0 100%);
clip-path: polygon(0 0, 1600px 0, 1600px 87%, 0 100%);
}

У прикладі вище 1600px – максимальна ширина елемента.

Єдиний недолік у властивості clip-path це підтримка браузерами. На момент написання статті властивість підтримувалося лише в webkit браузерах. Firefox підтримує, але тільки в поєднанні з url.

CSS генерований контент

Другий варіант це нахил генерованого контенту. Такий підхід чудово працює з блоками із суцільним фоном.

.quote {
background: #41ade5;
color: #fff;
position: relative;
z-index: 1;
}
.quote:after {
background: inherit;
bottom: 0;
content: «;
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
transform: skewY(-1.5 deg);
transform-origin: 100%;
z-index: -1;
}

До нижньої межі блоку додається псевдо-елемент. В якості центру обертання вказується правий нижній кут, і елемент обертається на -1.5 градуси. Тим самим створюється ефект похилій грані. Для симуляції верхній похилій грані краще всього додати ще один псевдо-елемент :before, встановити в якості точки обертання верхній правий кут і провернути на 1.5 градуса.

Даний метод відмінно підтримується браузерами і добре працює з суцільними фонами завдяки властивості background: inherit.

Sass mixin для похилий країв

Для більшої гнучкості ми створили розумний Sass mixin, який дозволяє робити похилими верхній, нижній або обидва краї відразу, а також змінювати точку обертання.

.block {
background: #41ade5;
@include angle(after);
}

У codepen демо нижче показаний міксин.

Ось і все готово! Легкий генерований контент з похилими краями з допомогою простого Sass міксина. Якщо вам сподобався мій спосіб чи ви знаєте інший, пишіть в коментарях.