Оригинал: Create Diagonal Layouts Like It's 2020, автор Nils Binder

Лейауты с диагональными секциями популярны уже несколько лет — это далеко не новое веяние. Наклонные линии позволяют дизайнерам создавать динамичные шаблоны и избавляться от скучных классических прямых углов.

Раз так, фронтендеры обязаны уметь воплощать эти идеи в вебе с помощью CSS.

Не существует единственно правильного способа заострять углы. Просто навскидку можно привести сразу три идеи:

И сейчас мы поговорим о последних.

Базовая разметка

Начнем сразу с простого примера. HTML-структура состоит всего из двух контейнеров:


Внешний div растягивается на всю ширину страницы и служит фоном (заполним его градиентом), а во внутреннем вы можете разместить контент блока. Чтобы все выглядело красиво, ему можно ограничить максимальную ширину и выровнять по центру с помощью автоматического расчета маргинов:


Создание диагональных лейаутов. Базовая разметка

Трансформация

Самая первая идея, которая может у вас появиться, — это вращение блока целиком. Но тут есть проблема: придется увеличить его ширину, чтобы повернутый элемент не выглядел обрезанным и занимал весь вьюпорт. Насколько именно увеличивать размер, зависит от высоты секции (и угла поворота, конечно). Чем она выше, тем больше нужно растягивать.

Создание диагональных лейаутов. Использование rotate трансформации

Вместо вращения мы можем использовать другой тип трансформации — перекос (skew). Чтобы изменять блок только по вертикальной оси, возьмем функцию skewY:


Создание диагональных лейаутов. Использование skew трансформации

Компенсация трансформаций

Сейчас перекошены оба блока — и внешний, и внутренний. Иногда это именно то, что нам нужно, однако чаще всего контент должен оставаться в нормальном виде. Поэтому необходимо компенсировать трансформацию для внутреннего элемента:


Создание диагональных лейаутов. Компенсация трансформаций для внутреннего блока

Псевдоэлемент

Если вы будете применять к блоку контента еще какие-либо трансформации, то необходимо всегда добавлять эту компенсацию (первой в списке других трансформаций). Сочетание изменений может неожиданным образом повлиять на макет.

Чтобы избежать этого, можно использовать другой подход. Вместо перекашивания самого контейнера, можно добавить ему псевдоэлемент (с такими же размерами) и изменять его.


Позиционируем псевдоэлемент относительно внешнего контейнера. Так же потребуется добавить position: relative к внутреннему блоку, чтобы он оставался наверху.

Создание диагональных лейаутов. Использование псевдоэлемента

Размещение контента

На изображении очевидно, что диагональный фон теперь не полностью покрывает область контента. Нам следует добавить внутренние отступы, чтобы важный текст или изображение не оказалось «вне» цветного блока.

Но как подобрать правильное значение паддингов? Конечно, можно сделать это методом проб и ошибок. Но можно копнуть чуть глубже, подключив простые законы тригонометрии и вычислить точный размер.

Создание диагональных лейаутов. Расчет паддингов

Посмотрите на схему на картинке. Ширина a нам известна — это ширина контейнера с контентом. α — это тот самый угол, на величину которого мы искривили блок (11deg). Теперь не составляет труда найти сторону x прямоугольного треугольника по формуле:


Но к сожалению, в CSS не поддерживается функция вычисления тангенса.

Впрочем, это не такая уж большая проблема. В большинстве случаев вы сразу установите угол наклона и посчитаете величину паддинга вручную.

Главное, помните о том, что юниты везде должны быть одинаковые. Если вы используете градусы (deg) для наклона блока, то и при расчете величины отступа тоже нужно использовать градусы (а не радианы — rad). Калькулятор Google, например, по умолчанию использует радианы.

Кастомные свойства

Число, которое вы получите после вычисления тангенса, нельзя назвать красивым. Например, tan(11°) / 2 = 0.09719. К счастью, для его хранения мы можем использовать CSS Переменную.


Также мы положили в переменную ширину блока контента и вычисленное значение паддинга. Зачем это нужно, кроме того, что код стал более читаемым и понятным? Теперь мы можем при необходимости изменить --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 комментариев

Оставить комментарий

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован