🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
Как нарисовать CSS-треугольник коническим градиентом
Конический градиент conic-gradient() раскрашивает фон секторами вокруг выбранной точки. Если поставить соседние цвета на одной угловой отметке, переход станет резким, а сектор внутри прямоугольного элемента превратится в треугольник.
Для тренировки задайте центр градиента в левом верхнем углу, начало направьте вправо, а границу цветов поставьте на 45 градусов. Меняйте угол и наблюдайте за фигурой: так связь между градусами и формой видна сразу.
В статье Master.dev Blog этим способом делают крупные треугольники навигации и меняют их углы при наведении. Затем сравните результат с линейным градиентом linear-gradient(): он тоже справится, но конический вариант позволяет описывать форму через угол сектора.