Направление линейного градиента: ключевые слова и углы

Горизонтальные полосы мы уже умеем делать. Чтобы повернуть их вертикально, в градиенте достаточно одного слова перед списком цветов:

.flag--italy {
  aspect-ratio: 3 / 2;
  background: linear-gradient(to right, #009246 33.33%, #f1f2f1 0 66.67%, #ce2b37 0);
}

Стопы остались прежними, поменялась только ось, вдоль которой они отсчитываются: теперь 0% — это левый край, а 100% — правый.

Ключевые слова

Направление пишется как to плюс сторона, куда идёт градиент:

• to bottom — сверху вниз (это значение по умолчанию, его можно не писать);
• to top — снизу вверх;
• to right и to left — по горизонтали;
• to top right, to bottom left и ещё две пары — в угол блока.

Итого восемь направлений. Для большинства фонов этого хватает.

Углы

Когда восьми направлений мало, вместо слов пишут угол в градусах. Отсчёт идёт от верха по часовой стрелке:

Удобно представлять стрелку компаса: угол показывает, куда смотрит стрелка, а цвета идут от её хвоста к острию.

.box {
  --angle: 180deg;
  background: linear-gradient(var(--angle), #f8f9fa 0 20%, #1c7ed6);
}

.box--a0  { --angle: 0deg; }
.box--a45 { --angle: 45deg; }
.box--a90 { --angle: 90deg; }

Угол вынесен в CSS-переменную, чтобы не повторять градиент пять раз: каждый модификатор меняет только число.

Значит, у флага Италии есть второй вариант записи — linear-gradient(90deg, …). Результат тот же.

Ловушка: 45deg — это не угол блока

Кажется, что 45deg и to top right — одно и то же. На квадрате так и есть, а вот на прямоугольнике — нет.

.box {
  aspect-ratio: 3 / 1;
}

.box--deg {
  background: linear-gradient(45deg, #1c7ed6 50%, #fab005 0);
}

.box--corner {
  background: linear-gradient(to top right, #1c7ed6 50%, #fab005 0);
}

• С 45deg граница всегда наклонена под 45° и пересекает блок где придётся.
• С to top right браузер подбирает угол под пропорции блока так, чтобы линия 50% прошла точно через два других угла — верхний левый и нижний правый.

Это свойство ключевых слов очень удобно для диагоналей: при изменении размеров блока граница остаётся на диагонали без пересчёта углов.

Диагональная полоса

Флаг Танзании — зелёный треугольник, чёрная полоса с жёлтой окантовкой и синий треугольник. Полоса идёт ровно из нижнего левого угла в верхний правый, значит, сам градиент должен идти поперёк неё — к нижнему правому углу. С to bottom right линия 50% проходит точно через два других угла, то есть по диагонали флага. Осталось симметрично разложить полосы вокруг неё:

.flag--tanzania {
  aspect-ratio: 3 / 2;
  background: linear-gradient(
    to bottom right,
    #1eb53a 38.1%,      /* зелёный треугольник */
    #fcd116 0 41.9%,    /* жёлтая окантовка */
    #000 0 58.1%,       /* чёрная полоса, центр — на 50% */
    #fcd116 0 61.9%,    /* жёлтая окантовка */
    #00a3dd 0           /* синий треугольник */
  );
}

Позиции симметричны относительно 50%: чёрная полоса занимает по 8,1% в каждую сторону, окантовка — ещё по 3,8%. Благодаря ключевому слову центр полосы остаётся на диагонали при любой ширине флага. С углом в градусах его пришлось бы пересчитывать для каждой пропорции.

Что запомнить

• Направление пишут первым аргументом: to right или 90deg.
• 0deg смотрит вверх, дальше отсчёт идёт по часовой стрелке.
• to top right подстраивается под пропорции блока, 45deg — нет.