Генератор CSS-треугольника

Выберите направление, размер и цвет, чтобы построить треугольник на чистом CSS, а затем скопируйте код. Используется классическая техника: элемент с нулевой шириной и высотой, у которого одна сторона имеет сплошную рамку, а две соседние — прозрачные. Никаких файлов изображений, SVG или clip-path — всего несколько объявлений border, понятных любому браузеру.

Что это за инструмент?

В CSS нет отдельной фигуры «треугольник», поэтому треугольники строятся известным обходным путём: берётся элемент с нулевой шириной и высотой, одной стороне задаётся сплошная рамка, а двум соседним сторонам — прозрачные. Поскольку соседние рамки сходятся под углом 45 градусов, прозрачные рамки сужаются до точки, оставляя видимой только цветную рамку в виде треугольника.

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

Источник: CSS Backgrounds and Borders Module Level 3, W3C — определяет, как смежные края границ сходятся под углом, что и является механизмом, на котором основана эта техника треугольников.

Зачем его использовать?

Предпросмотр в реальном времени отрисовывает настоящий треугольник, чтобы вы могли проверить размер, направление и цвет перед копированием.
Покрывает все четыре базовых направления — вверх, вниз, влево, вправо — одним элементом управления.
Не нужны файлы изображений или SVG — построенный так треугольник это всего пара строк CSS.
Полезно для указателей подсказок, стрелок выпадающих меню/аккордеонов, кастомных маркеров списков и простых декоративных фигур.
Работает полностью в вашем браузере — ничего из настроенного никуда не загружается.
Бесплатно, без регистрации, работает на мобильных.

Как использовать

Выберите направление — треугольник указывает вверх, вниз, влево или вправо в зависимости от того, какая сторона получает сплошную рамку.
Задайте размер — он определяет значение border-width на всех трёх сторонах и определяет, насколько большим кажется треугольник.
Выберите цвет для видимой (сплошной) рамки — он становится цветом заливки треугольника.
Скопируйте сгенерированный CSS и примените его к элементу с width: 0 и height: 0 — подойдёт как пустой <div>, так и псевдоэлемент ::before/::after.

Пример

Ввод

Направление: вниз · Размер: 60px · Цвет: #ea580c

Результат

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea580c;

Для треугольника, указывающего вниз, сплошной цвет ставится на border-top, а левая и правая рамки остаются прозрачными — сторона, противоположная направлению, куда указывает треугольник.

Почему важны нулевые ширина и высота

Этот приём работает только потому, что у элемента нет собственного блока содержимого — width: 0 и height: 0 означают, что вся видимая фигура складывается исключительно из рамок, сходящихся в центральной точке. Если у элемента есть какая-либо ширина или высота, рамки перестают сходиться в чёткую точку, и фигура ломается. Именно поэтому техника одинаково хорошо работает как на пустом <div>, так и на псевдоэлементе ::before/::after с content: "" — реальное содержимое не нужно, нужен только блок рамки.

Документация MDN по свойству CSS border описывает, как сочетаются border-width, border-style и border-color, в том числе как рамки соседних сторон сходятся по диагонали (developer.mozilla.org/en-US/docs/Web/CSS/border) — геометрический факт, на котором построена вся эта техника.

Распространённые применения CSS-треугольников

Указатели подсказок и речевых пузырей: небольшой треугольник (6–10px), расположенный у края скруглённого блока, цветом совпадающий с фоном блока.
Стрелки выпадающих меню и select: небольшой треугольник вниз рядом с кнопкой или элементом select, показывающий, что он открывает меню.
Индикаторы аккордеона/раскрытия: треугольник, указывающий вправо, который поворачивается вниз при раскрытии раздела.
Кастомные маркеры списка: небольшой треугольник вправо вместо стандартного маркера браузера, для более выразительного стиля списка.
Простые уголки баннера/ленты: треугольник, вставленный в угол карточки, имитирующий эффект загнутой ленты.

Сочетание с другими CSS-инструментами

Треугольникам, используемым как указатели подсказок, обычно нужна подходящая тень, чтобы визуально сочетаться с блоком, к которому они прикреплены — Генератор box-shadow создаёт такую тень. Для фигур интерфейса сложнее треугольников (шевроны, звёзды, шестиугольники) обычно лучше подходит современный подход с clip-path, а не наращивание дополнительных приёмов с рамками.

→ Генератор box-shadow · Генератор border-radius

Часто задаваемые вопросы

Почему цвет ставится на рамку, противоположную направлению, куда указывает треугольник?

Представьте элемент как ромб, состоящий из четырёх треугольных сегментов рамки, сходящихся в центре. Если сплошной цвет находится на верхней рамке, видимая фигура занимает верхнюю половину — но поскольку у элемента нулевой размер, этот треугольник «верхней половины» на самом деле указывает вниз, туда, где находился бы несуществующий блок содержимого элемента. Та же логика применима ко всем четырём направлениям.

Можно ли сделать треугольник, не являющийся идеально равнобедренным?

Да — этот инструмент всегда генерирует симметричный треугольник для простоты, но вы можете вручную отредактировать скопированный CSS. Если сделать две прозрачные border-width неравными, треугольник наклонится в одну сторону; изменение ширины сплошной рамки независимо меняет его высоту, не влияя на ширину основания.

Работает ли эта техника во всех браузерах?

Да — приём с треугольником на основе рамок опирается только на базовую поддержку border-width, border-style и border-color, которая существует с самых ранних реализаций CSS. Это одна из наиболее широко совместимых техник построения фигур на чистом CSS.

Когда стоит использовать clip-path вместо приёма с рамками?

Приём с рамками идеален именно для простых треугольников, поскольку не требует дополнительных свойств и работает везде. Для чего-то более сложного — пятиугольников, звёзд, стрелок с вырезом или диагональных срезов на блоке, который всё ещё должен показывать фоновое изображение — clip-path более гибок и понятен, хотя имеет более узкую поддержку в старых браузерах.

Можно ли поместить текст или иконку внутрь треугольника?

Не напрямую — поскольку элемент треугольника имеет нулевую ширину и высоту, у него нет блока содержимого, способного что-либо вместить. Чтобы совместить треугольник с текстом или иконкой, используйте его как декоративный псевдоэлемент (::before/::after) на родительском элементе, который позиционирует его абсолютно, а фактическое содержимое родителя стилизуйте отдельно.