Softonic

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

Шаг 1 / 2
Далее

Классический CSS-треугольник на самом деле вовсе не треугольник, это элемент нулевой ширины и высоты с тремя прозрачными границами и одной цветной, которые сходятся в одной точке. Этот генератор выдаёт такое объявление в четырёх направлениях (вверх, вниз, влево, вправо), с размером в пикселях, который вы задаёте, и заливкой выбранным цветом. Отлично подходит для стрелок всплывающих подсказок, речевых выносок и разделителей «хлебных крошек».

Как построить треугольник на границах

  1. 1

    Выберите направление

    Вверх, вниз, влево или вправо, направление определяет, какая граница получит цвет, а три других останутся прозрачными.

  2. 2

    Задайте размер

    Значение размера применяется ко всем ширинам границ. Треугольник размером 60px будет иметь ширину 120px (или высоту, в зависимости от направления).

  3. 3

    Выберите цвет заливки

    Поле выбора цвета поддерживает только значения hex (например `#10b981`); цвета rgb, rgba и именованные цвета не поддерживаются. Цвет применяется только к границе противоположной стороны.

  4. 4

    Скопируйте правило CSS

    Результат, это готовый набор правил `.triangle { ... }`. Вставьте его в свою таблицу стилей и добавьте `<div class="triangle"></div>` там, где нужно.

Почему трюк с границами работает

Когда у элемента заданы width: 0 и height: 0, его четыре границы сходятся в одной центральной точке. Поскольку границы стыкуются под углом 45 градусов, каждая из них уже представляет собой треугольник, просто три из них невидимы. Сделайте одну границу цветной, и вы увидите этот треугольник.

Карта направлений

Направление Видимая граница Прозрачные границы
Вверх border-bottom border-left, border-right, border-top
Вниз border-top border-left, border-right, border-bottom
Влево border-right border-top, border-bottom, border-left
Вправо border-left border-top, border-bottom, border-right

Расчёт размеров

Все три прозрачные границы используют одно значение размера. Видимая граница использует тот же размер. Поэтому треугольник с size: 60:

  • Ширина = 2 × 60 = 120px для треугольников вверх/вниз
  • Высота = 2 × 60 = 120px для треугольников влево/вправо

Если нужен асимметричный треугольник (узкое основание, высокая вершина), задайте прозрачным границам один размер, а видимой границе, другой; например, border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid red; даёт высокий и узкий треугольник, направленный вверх.

Когда лучше выбрать SVG

  • Нужно несколько вершин, а не три, используйте <polygon>.
  • Треугольник должен плавно масштабироваться вместе с родительским элементом, используйте viewBox и preserveAspectRatio.
  • Нужна градиентная заливка, обводка или скруглённый кончик, границы CSS ничего из этого не умеют.

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

Только границами, нет: ширины границ не принимают % или vw каким-либо хорошо поддерживаемым способом. Если нужно плавное масштабирование, перейдите на SVG <polygon> или используйте clip-path: polygon(...) на обычном элементе.

Скруглить угол, где сходятся границы, нельзя. Используйте SVG с обведённым контуром (path) и stroke-linejoin: round либо clip-path: polygon(...) в сочетании с лёгким filter: drop-shadow, чтобы замаскировать край.

Да, это самый частый сценарий. Разместите треугольник абсолютным позиционированием у края подсказки и подберите цвет заливки под фон подсказки, чтобы всё выглядело как единая выноска.

Да. Выбранные направление, размер и цвет отправляются на наш сервер вместе с запросом страницы, чтобы он мог собрать CSS. В пошаговом режиме эти значения также попадают в ссылку страницы. Они не сохраняются.

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Генератор цветовой палитры

Создавайте монохромные, аналоговые, комплементарные, триадные или тетрадные палитры из базового HEX-цвета и экспортируйте готовые CSS-переменные.

Инструмент доступен на других языках