TGViewer
Точка входа в программирование Точка входа в программирование @prog_point · 18K subscribers
Post #5121 551
Как нарисовать CSS-треугольник коническим градиентом

Конический градиент conic-gradient() раскрашивает фон секторами вокруг выбранной точки. Если поставить соседние цвета на одной угловой отметке, переход станет резким, а сектор внутри прямоугольного элемента превратится в треугольник.

Для тренировки задайте центр градиента в левом верхнем углу, начало направьте вправо, а границу цветов поставьте на 45 градусов. Меняйте угол и наблюдайте за фигурой: так связь между градусами и формой видна сразу.

В статье Master.dev Blog этим способом делают крупные треугольники навигации и меняют их углы при наведении. Затем сравните результат с линейным градиентом linear-gradient(): он тоже справится, но конический вариант позволяет описывать форму через угол сектора.
  • 🆒 1
More from @prog_point
  1. Sep 20, 2026Как читать ввод с геймпада в JavaScript и не принять поломку за норму В Gamepad API нет со…
  2. Sep 20, 2026Как выбрать пагинацию для API Пагинация делит ответ API на части. Offset пропускает N стро…
  3. Sep 20, 2026Какие исключения ловить в Python и какие оставить видимыми Один except для ValueError, Typ…
  4. Sep 19, 2026Превращаем статичную HTML-страницу в редактор на JavaScript Резюме или меню можно отдать а…
  5. Sep 19, 2026Инструкция по применению: открыть анкету, ответить на вопросы из школьной тетрадки, по дор…
  6. Sep 19, 2026freeCodeCamp.org выпустил бесплатный курс по Python с тремя проектами Это четырёхчасовой в…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →