Флаг Бенина — зелёная вертикальная полоса у основания и два горизонтальных прямоугольника справа, жёлтый над красным. Три области сходятся в одной точке, а значит, их можно нарезать одним коническим градиентом:
.flag--benin {
aspect-ratio: 3 / 2;
background: conic-gradient(at 40% 50%, #fcd116 25%, #e8112d 0 50%, #008751 0);
}Как работает конический градиент
У линейного градиента цвета идут вдоль линии, у радиального — от центра наружу. У конического они идут по кругу вокруг центра, как стрелка часов: старт — вверх, движение — по часовой стрелке.
Название объясняет простая картинка. Если взять лист с обычной полосатой заливкой и свернуть его в кулёк-конус, а потом посмотреть на конус сверху, полосы превратятся в секторы, сходящиеся в вершине.
Позиции стопов можно писать в процентах от полного оборота или в градусах:
- 25% = 90deg — четверть круга, стрелка смотрит вправо;
- 50% = 180deg — стрелка смотрит вниз;
- 100% = 360deg — полный оборот.
Теперь флаг Бенина читается так. Центр стоит на 40% ширины — ровно на краю зелёной полосы. От направления «вверх» до «вправо» (0–25%) — жёлтый, от «вправо» до «вниз» (25–50%) — красный, вся левая половина оборота — зелёный. Центр, как и у радиального градиента, переносится через at.
Треугольник из секторов
Флаг Чехии: белая полоса сверху, красная снизу и синий треугольник от начала до середины флага. Вершина треугольника — ровно в центре, поэтому at не нужен.
.flag--czechia {
aspect-ratio: 3 / 2;
background: conic-gradient(#fff 25%, #d7141a 0 65.64%, #11457e 0 84.36%, #fff 0);
}Откуда дробные проценты? Синий сектор тянется от направления на нижний левый угол до направления на верхний левый. На флаге 3:2 эти направления составляют 236,31° и 303,69°, что в долях оборота и даёт 65,64% и 84,36%.
Но белый цвет здесь записан дважды: сектор «вверх → вправо» и сектор от синего до конца оборота. Это одна и та же область, просто старт оборота разрезал её пополам.
Поворот старта через from
Ключевое слово from поворачивает начальную точку оборота. Начнём с направления «вправо», где кончается белый и начинается красный:
.flag--czechia {
aspect-ratio: 3 / 2;
background: conic-gradient(from 90deg, #d7141a 40.64%, #11457e 0 59.36%, #fff 0);
}Каждый цвет теперь записан один раз. Все позиции сместились на четверть оборота, а отрицательный угол (from -45deg) повернул бы старт против часовой стрелки. from и at можно сочетать: conic-gradient(from 90deg at 40% 50%, …).
Не только флаги: круговая диаграмма
Секторы с жёсткими границами — это готовая круговая диаграмма. Остаётся скруглить квадрат до круга:
.pie {
width: 220px;
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(#4c6ef5 40%, #fab005 0 65%, #12b886 0 85%, #e64980 0);
}Позиции стопов — это накопленная сумма долей: 40%, затем 40 + 25 = 65%, затем 65 + 20 = 85%, остаток уходит последнему цвету. Сам по себе градиент для скринридера невидим, поэтому подписи нужны текстом: в демо это легенда и aria-label на диаграмме.
Что запомнить
- Конический градиент идёт по часовой стрелке от направления «вверх».
- Позиции — в процентах оборота или градусах; 25% = 90deg.
- at переносит центр, from поворачивает старт.
- Жёсткие секторы вокруг одной точки — это треугольники, клинья и диаграммы без единой картинки.
