Диагональные макеты CSS
Диагональные макеты CSS

Макеты с диагональными сечениями довольно популярны уже несколько лет. Это не новый тренд, и вы, вероятно, не найдете его в статьях под названием «Тенденции дизайна на 2020 год». Но я думаю,диагональные макеты в дизайне вашего сайта будут к месту. Это один из инструментов, который дизайнеры могут использовать, чтобы придать динамику всем прямоугольным прямоугольникам со скучными углами в 90 градусов.

Из-за этого UI дизайнерам важно знать, как реализовать эти проекты с помощью CSS. Поэтому, если вы хотите научиться делать это, вы попали в нужное место.

Как это часто бывает, святого грааля не существует. Существует много способов создания таких макетов. И под многими я имею в виду три. По крайней мере, которые я знаю:

  1. Используйте SVG в форме треугольника. Эта техника хорошо описана Эриком Кеннеди на CSS-Tricks.
  2. Скрыть часть вашего раздела, используя CSS-Clip-Path. Прочитайте диагональные контейнеры в CSS Себастьяно Герриеро или Наклонные края с постоянным углом в CSS Килианом Вальхофом.
  3. Использование CSS-преобразований.

Вы, возможно, уже догадались, какой из приведенных вариантов я собираюсь использовать. Правильно, третий 🙂

Давайте приступим!

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

Сначала мы настроим нашу HTML-разметку. Нам понадобится два контейнера.

<div class="diagonal-box">
	<div class="content"> ... </div>
</div>

Внешний div — это наш раздел полной ширины, тогда как внутренний будет содержать фактическое содержимое. Как правило, у вас будет max-width для внутреннего div и задайте горизонтальное поле auto для его центрирования. На данный момент внешний контейнер получает не что иное, как приятный маленький градиент в качестве background-image.

.diagonal-box {
	background-image: linear-gradient(45deg, #6303B1, #ff0099);
} 
.content { 	
	max-width: 50em;
    margin: 0 auto; 
}

II. Сделать преобразование

Первой идеей для создания диагоналей может быть вращение всего контейнера. Проблема здесь в том, что после поворота поля 100% -width вы должны увеличить ширину выше 100%, чтобы она по-прежнему покрывала весь видовой экран. Величина увеличения ширины увеличивается с высотой сечения.

Поэтому вместо его вращения мы будем использовать менее известное преобразование. Точнее, мы будем использовать SkewY для перекоса сечения вдоль оси Y.

.diagonal-box {
	background-image: linear-gradient(45deg, #6303B1, #ff0099);
	transform: skewY(-11deg);
}

III. Внутренняя и внешняя трансформация

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

.diagonal-box {
	background-image: linear-gradient(45deg, #654ea3, #eaafc8);
	transform: skewY(-11deg);
}

.content {
	max-width: 50em;
	margin: 0 auto;
	transform: skewY(11deg);
}

IV. Использование псевдоэлемента

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

.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;
}

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

V. Размещайте свой контент без страха.

Возможно, вы заметили, что теперь содержимое не полностью окружено окружающим контейнером. Если вы хотите поместить что-то в контейнер, не боясь, что оно пересечет диагональные линии, вам нужно немного дополнить. Один из способов найти правильное количество отступов, которое вам подходит, — это использовать метод проб и ошибок. Или вы углубляетесь в свои знания тригонометрии и вычисляете точную высоту:

Когда вы посмотрите на иллюстрацию, вы увидите, что мы уже знаем ширину a, поскольку это наша ширина контейнера. Тогда α — это тот же угол, который мы использовали для перекоса нашего элемента (11deg). И мы знаем, что все образует прямоугольный треугольник. С помощью этой информации мы можем вычислить х, используя эту формулу:

x = tan(α) * a / 2

К сожалению, мы не можем использовать это с вычислениями CSS, так как функция тангенса не поддерживается. Это не огромная проблема, хотя. В большинстве случаев угол остается неизменным, поэтому его можно рассчитать один раз, а затем сохранить. Тем не менее, есть одна точка, в которой вы должны быть осторожны: большинство из вас будут использовать градусы в качестве единицы измерения при преобразовании: skewY (-11deg). Если вы сделаете это, вы также должны использовать Deg, а не Rad, когда вычисляете тангенс. Стандартный калькулятор Google использует Rad по умолчанию.

VI. Веселье с Custom-Properties

Числа, которые вы получаете из калькулятора, выглядят не так хорошо. В этом примере tan (11 °) / 2 дает 0,09719. К счастью, мы можем использовать custom properties и сделать наш код намного проще для чтения:

: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. Наконец, мы вычисляем требуемое заполнение путем умножения двух предыдущих переменных, а также сохраняем значение в переменной. Поскольку 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.light