Макеты с диагональными сечениями довольно популярны уже несколько лет.
Поэтому вы, возможно уже знаете как реализовать подобное решение. Если нет, то эта статья обязательна к прочтению
Три способа создания
1) Используйте SVG в форме треугольника. Эта техника хорошо описана Эриком Кеннеди на CSS-Tricks .
2) Скрыть часть вашего раздела, используя CSS-Clip-Path.
3) Использование CSS-преобразований.
Вы, возможно, уже догадались, какой из приведенных вариантов я собираюсь использовать. Правильно, третий :-)
Начинаем
Базовая разметка
<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;
}
Сделать преобразование
Первой идеей для создания диагоналей может быть вращение всего контейнера. Проблема здесь в том, что после поворота поля 100% -width вы должны увеличить ширину, чтобы она по-прежнему покрывала весь экран.
Поэтому вместо вращения мы будем использовать менее известное преобразование. Точнее, мы будем использовать SkewY для перекоса сечения вдоль оси Y.
.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;
}
Теперь вся магия происходит в элементе before. Поскольку он позиционируется с использованием абсолютного положения, необходимо добавить два относительных значения положения. Первый относится к внешнему контейнеру, поэтому все его дочерние элементы могут быть расположены относительно его границ. А другой - к внутреннему контейнеру, так что он остается поверх элемента before.
V. Размещайте свой контент без страха.
Возможно, вы заметили, что теперь содержимое не полностью окружено окружающим контейнером. Если вы хотите поместить что-то в контейнер, не боясь, что оно пересечет диагональные линии, вам нужно немного дополнить. Один из способов найти правильное количество отступов, которое вам подходит, - это использовать метод проб и ошибок. Или вы углубляетесь в свои знания тригонометрии и вычисляете точную высоту:
Когда вы посмотрите на иллюстрацию, вы увидите, что мы уже знаем ширину a , поскольку это наша ширина контейнера. Тогда α - это тот же угол, который мы использовали для перекоса нашего элемента (11deg). И мы знаем, что все образует прямоугольный треугольник. С помощью этой информации мы можем вычислить х, используя эту формулу:
х = tan(а) * а / 2
К сожалению, мы не можем использовать это с вычислениями CSS, так как функция тангенса не поддерживается. Это не огромная проблема, хотя. В большинстве случаев угол остается неизменным, поэтому его можно рассчитать один раз, а затем сохранить. Тем не менее, есть одна точка , где вы должны быть осторожны: Большинство из вас будет использовать в качестве единицы градусов , когда вы делаете преобразование: skewY(-11deg). Если вы сделаете это, вы также должны использовать Deg, а не Rad, когда вычисляете тангенс. Стандартный калькулятор Google использует Rad по умолчанию.
VI. Веселье с Custom-Properties
Числа, которые вы получаете, выглядят не так хорошо. В этом примере tan (11 °) / 2 дает 0,09719.
К счастью, мы можем использовать пользовательские свойства и сделать наш код намного проще для чтения:
: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;
}
}
Посмотрим, что здесь происходит. Сначала мы вычисляем наше магическое число и сохраняем его в переменной. Затем мы также храним контент-ширину. И наконец, мы вычисляем требуемое заполнение путем умножения двух предыдущих переменных, а также сохраняем значение в переменной.
Поскольку CSS-переменные обновляются в режиме реального времени, мы можем изменить --content-width и соответственно --skew-padding скорректировать.
Теперь, когда у вас есть расстояние, сохраненное в переменной, вы можете использовать его в любом месте вашего проекта. Например, вы можете расположить несколько прямоугольников так, чтобы они были выровнены по диагонали. В зависимости от количества контейнеров, вам нужно использовать некоторые расчеты. Подобно:
transform: translateY(calc(var(--skew-padding) / 2));