Лейауты с диагональными секциями популярны уже несколько лет — это далеко не новое веяние. Наклонные линии позволяют дизайнерам создавать динамичные шаблоны и избавляться от скучных классических прямых углов.
Раз так, фронтендеры обязаны уметь воплощать эти идеи в вебе с помощью CSS.
Не существует единственно правильного способа заострять углы. Просто навскидку можно привести сразу три идеи:
- SVG-формы. На CSS-Tricks есть отличный пост: Creating Non-Rectangular Headers
- CSS Clip Path. Вот сразу две отличных статьи для примера: Diagonal Containers in CSS и Sloped edges with consistent angle in CSS.
- CSS Трансформации.
И сейчас мы поговорим о последних.
Базовая разметка
Начнем сразу с простого примера. HTML-структура состоит всего из двух контейнеров:
<div class="diagonal-box">
<div class="content"> ... </div>
</div>Внешний div растягивается на всю ширину страницы и служит фоном (заполним его градиентом), а во внутреннем вы можете разместить контент блока. Чтобы все выглядело красиво, ему можно ограничить максимальную ширину и выровнять по центру с помощью автоматического расчета маргинов:
.diagonal-box {
background-image: linear-gradient(45deg, #6303B1, #ff0099);
}
.content {
max-width: 50em;
margin: 0 auto;
}
Трансформация
Самая первая идея, которая может у вас появиться, — это вращение блока целиком. Но тут есть проблема: придется увеличить его ширину, чтобы повернутый элемент не выглядел обрезанным и занимал весь вьюпорт. Насколько именно увеличивать размер, зависит от высоты секции (и угла поворота, конечно). Чем она выше, тем больше нужно растягивать.
Вместо вращения мы можем использовать другой тип трансформации — перекос (skew). Чтобы изменять блок только по вертикальной оси, возьмем функцию skewY:
.diagonal-box {
background-image: linear-gradient(45deg, #6303B1, #ff0099);
transform: skewY(-11deg);
}
Компенсация трансформаций
Сейчас перекошены оба блока — и внешний, и внутренний. Иногда это именно то, что нам нужно, однако чаще всего контент должен оставаться в нормальном виде. Поэтому необходимо компенсировать трансформацию для внутреннего элемента:
.diagonal-box {
background-image: linear-gradient(45deg, #654ea3, #eaafc8);
transform: skewY(-11deg);
}
.content {
max-width: 50em;
margin: 0 auto;
transform: skewY(11deg);
}
Псевдоэлемент
Если вы будете применять к блоку контента еще какие-либо трансформации, то необходимо всегда добавлять эту компенсацию (первой в списке других трансформаций). Сочетание изменений может неожиданным образом повлиять на макет.
Чтобы избежать этого, можно использовать другой подход. Вместо перекашивания самого контейнера, можно добавить ему псевдоэлемент (с такими же размерами) и изменять его.
.diagonal-box {
position: relative;
}
.diagonal-box:before {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-image: linear-gradient(45deg, #654ea3, #eaafc8);
transform: skewY(-11deg);
}
.content {
max-width: 50em;
margin: 0 auto;
position: relative;
}Позиционируем псевдоэлемент относительно внешнего контейнера. Так же потребуется добавить position: relative к внутреннему блоку, чтобы он оставался наверху.
Размещение контента
На изображении очевидно, что диагональный фон теперь не полностью покрывает область контента. Нам следует добавить внутренние отступы, чтобы важный текст или изображение не оказалось «вне» цветного блока.
Но как подобрать правильное значение паддингов? Конечно, можно сделать это методом проб и ошибок. Но можно копнуть чуть глубже, подключив простые законы тригонометрии и вычислить точный размер.
Посмотрите на схему на картинке. Ширина a нам известна — это ширина контейнера с контентом. α — это тот самый угол, на величину которого мы искривили блок (11deg). Теперь не составляет труда найти сторону x прямоугольного треугольника по формуле:
x = tan(α) * a / 2Но к сожалению, в CSS не поддерживается функция вычисления тангенса.
Впрочем, это не такая уж большая проблема. В большинстве случаев вы сразу установите угол наклона и посчитаете величину паддинга вручную.
Главное, помните о том, что юниты везде должны быть одинаковые. Если вы используете градусы (deg) для наклона блока, то и при расчете величины отступа тоже нужно использовать градусы (а не радианы — rad). Калькулятор Google, например, по умолчанию использует радианы.
Кастомные свойства
Число, которое вы получите после вычисления тангенса, нельзя назвать красивым. Например, tan(11°) / 2 = 0.09719. К счастью, для его хранения мы можем использовать CSS Переменную.
:root {
--magic-number: 0.09719; /* tan(11°)/2 */
--content-width: 100vw;
--skew-padding: calc(var(--content-width) * var(--magic-number));
}
@media screen and (min-width: 42em) {
:root {
--content-width: 42em;
}
}Также мы положили в переменную ширину блока контента и вычисленное значение паддинга. Зачем это нужно, кроме того, что код стал более читаемым и понятным? Теперь мы можем при необходимости изменить --content-width — а --skew-padding пересчитается автоматически.
Можно также выровнять по диагонали несколько блоков, подкорректировав для каждого внутренний отступ, например, так: transform: translateY (calc(var (--skew-padding) / 2)).
Вы можете поиграть с диагональными лейаутами на этом примере:
See the Pen Diagonal Layouts in 2020 by Nils Binder (@enbee81) on CodePen.
Здесь все сделано на чистом CSS (кроме изменения магического числа при изменении угла наклона — это на JS).
0 комментариев