Символ треугольника ▲ ▼: как скопировать, набрать и вставить в HTML

Символ треугольника проще всего скопировать отсюда: ▲ ▼ ► ◄ (чёрные), △ ▽ ▷ ◁ (контурные), ▴ ▾ ▸ ◂ (маленькие). В HTML их пишут числовым кодом: ▲ даёт ▲, ▼ даёт ▼. В Word наберите код 25B2 и нажмите Alt + X, на Mac откройте панель символов клавишами Fn + E.

Ниже таблица кодов всех треугольников, способы набрать их на Windows и Mac, вёрстка треугольника на CSS и SVG и ошибки, из-за которых вместо значка появляется квадратик. Если вы только начинаете разбираться с разметкой HTML, сначала прочитайте, как устроены Юникод и UTF-8: без них коды из таблицы не сработают.

CheckroiПодборка курсов по HTML207 курсов • 42 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Треугольники: скопировать символ и код

Все знаки ниже взяты из блока Юникода «Геометрические фигуры» (U+25A0–U+25FF) и соседних блоков. Названия и коды сверены с таблицей Unicode Consortium, именованные HTML-сущности с официальным списком WHATWG.

Обратите внимание: у самых популярных ▲ и ▼ именованной сущности в HTML нет. Имя ▴ выводит маленький ▴, а не крупный ▲. Если нужен именно большой треугольник, пишите числовой код.

Чем ▲ отличается от Δ и ∆

Три похожих знака в Юникоде означают разное, и поиск по тексту их не путает.

• △ (U+25B3) — геометрическая фигура. Его ставят как значок или маркер.
• Δ (U+0394) — заглавная греческая буква «дельта», в HTML Δ.
• ∆ (U+2206) — математический знак приращения, в Юникоде он называется INCREMENT.

Для обозначения треугольника в геометрии («△ABC») берите △. В формуле изменения величины пишут ∆ или Δ.

Стрелки со стеблем: коды для HTML

Треугольник часто ищут как «стрелку без стебля». Если нужна обычная стрелка с линией, у неё, в отличие от ▲, есть короткие имена в HTML.

Имена регистрозависимы: → даёт →, а ⇒ двойную ⇒. Все имена можно проверить в таблице WHATWG.

Как набрать треугольник на клавиатуре

Отдельной клавиши с треугольником нет ни в одной раскладке. Его вставляют через панель символов, код или старые Alt-коды.

Windows

1. Нажмите Win + точка: откроется панель эмодзи. Сочетание есть в списке клавиш Windows.
2. Перейдите в раздел символов и пролистайте до геометрических фигур.
3. Щёлкните по знаку, и он встанет в позицию курсора.

Второй способ: Alt-коды на цифровом блоке. Так же набирают и другие значки, например символ градуса. В шрифтах старой кодировки DOS (кодовая страница 437) служебным позициям 30, 31, 16 и 17 соответствуют глифы ▲, ▼, ► и ◄. Отсюда сочетания Alt + 30 и Alt + 31, которыми набирают треугольники вверх и вниз. Microsoft в справке по кодам символов напоминает: «Для ввода чисел используйте цифровую клавиатуру, а не цифры на основной клавиатуре».

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

Mac

1. Поставьте курсор в нужное место.
2. Нажмите Fn + E (на новых клавиатурах клавиша с глобусом + E) или выберите «Правка» → «Эмодзи и символы». Так окно открывает справка Apple.
3. Введите слово в поле поиска, например «треугольник», и щёлкните по нужному знаку.

Телефон

На смартфоне быстрее скопировать треугольник из этой статьи: долгий тап по знаку в таблице, затем «Копировать». Среди эмодзи есть только цветные треугольники вроде 🔺 и 🔻, а чёрные ▲ и ▼ эмодзи не считаются, их на такой клавиатуре нет.

Как вставить треугольник в Word

В Word работает ввод по шестнадцатеричному коду. По справке Microsoft: «Чтобы вставить символ Юникода, введите код знака, нажмите клавишу ALT, а затем — клавишу X».

1. Наберите код без пробела после предыдущего слова: 25B2.
2. Нажмите Alt + X, и код превратится в ▲.
3. Для других направлений: 25BC даёт ▼, 25BA даёт ►, 25C4 даёт ◄, 25B3 даёт △.

Через меню: на вкладке «Вставка» откройте список символов и выберите «Другие символы». В открывшемся окне найдите треугольник среди геометрических фигур. Тот же пункт есть и в других программах Office, его описывает справка Microsoft.

Треугольник в HTML и CSS

В вёрстке есть четыре способа получить треугольник: символ кодом, символ через CSS, фигура из рамок или clip-path и SVG. Каждый подходит под свою задачу. Если вёрстку хочется изучить целиком, загляните в подборку курсов по HTML.

Символ кодом в разметке

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Треугольники</title>
</head>
<body>
  <p>Рост: &#9650; 12 %</p>
  <p>Падение: &#x25BC; 4 %</p>
  <p>Маленький: &blacktriangle;</p>
</body>
</html>

Десятичный ▲ и шестнадцатеричный ▲ дают один и тот же ▲. Строка <meta charset="utf-8"> нужна, если вы вставляете сам знак ▲, а не код: без неё браузер может прочитать файл в другой кодировке. Как собрать каркас страницы целиком, показано в разборе HTML-кода сайта на пяти примерах.

Символ через CSS

Значок сортировки или раскрывающегося меню удобно добавлять не в разметку, а в стиль. В свойстве content символ пишут через обратный слеш и код без «U+».

.sort::after {
  content: "\25BC";
  margin-left: 6px;
  font-size: 0.8em;
}

Так треугольник появится после текста у каждого элемента с классом sort, а в HTML ничего менять не придётся. Куда положить такой стиль, рассказано в инструкции как подключить CSS к HTML.

Фигура из рамок и clip-path

Когда нужен треугольник точного размера и цвета, символ не годится: его вид зависит от шрифта. Фигуру рисуют блоком.

.tri-border {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 34px solid #e53935;
}

.tri-clip {
  width: 40px;
  height: 34px;
  background: #1e88e5;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

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

SVG

<svg width="40" height="34" viewBox="0 0 40 34" aria-hidden="true">
  <polygon points="20,0 40,34 0,34" fill="#43a047"/>
</svg>

SVG масштабируется без потери чёткости и не зависит от шрифтов, поэтому для иконок в интерфейсе он надёжнее символа. Про сам формат есть отдельный материал о том, что такое SVG и как вставить его на сайт.

Есть ли треугольник в ASCII

Нет. ASCII — семибитная кодировка, так она описана в RFC 20. Семь бит дают 128 кодов, и в них умещаются только латиница, цифры, знаки препинания и управляющие символы. Геометрических фигур там нет.

Треугольники в «ASCII-графике» собирают из обычных знаков:

Такие замены нужны там, где Юникод не проходит: в старых терминалах, комментариях к коду на латинице, моноширинных схемах. Знаки ▲ и ► из Alt-кодов к ASCII не относятся, хоть их и часто так называют.

Частые ошибки с символом треугольника

Вместо треугольника квадратик

В шрифте нет нужного глифа, и система не нашла замену. Так бывает с редкими знаками вроде ⯅ или ◬, если в системе нет шрифта с ними.

Решение: возьмите знак из основной части блока «Геометрические фигуры» или задайте в CSS запасной шрифт. Почему один и тот же символ выглядит в шрифтах по-разному, объясняет статья о глифах.

Треугольник ▶ стал цветной кнопкой

У знаков ▶ и ◀ в Юникоде два варианта показа: текстовый и эмодзи. Это прописано в списке вариантов эмодзи. В Chrome на Mac голый ▶ остаётся чёрным, а со служебным знаком FE0F становится иконкой ▶️.

Решение: чтобы закрепить текстовый вид, поставьте сразу после символа ︎. Или возьмите ► (U+25BA), у которого эмодзи-варианта нет.

Код вывелся текстом

На странице видно ▲ вместо ▲. Обычно код вставили в поле, которое экранирует HTML, например в заголовок письма или в текстовый редактор CMS. Там вставляйте сам символ, а не код.

Код без точки с запятой

Запись &#9650 браузер поймёт так же, как с точкой с запятой, но спецификация считает её ошибкой разбора. С именованными сущностями без ; хуже: по тому же разделу спецификации &notin читается как «¬in». Ставьте ; в конце каждого кода.

Треугольник читает экранный диктор

Декоративный ▼ рядом со словом «Цена» диктор может прочитать вслух названием символа. Если знак ничего не значит, выводите его через ::after или прячьте SVG атрибутом aria-hidden="true", как в примере выше.

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 800 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Где освоить вёрстку системно

Треугольник в таблице или значок сортировки кажутся мелочью. Из таких мелочей и складывается вёрстка интерфейса. Чтобы уверенно собирать страницы, нужны HTML, CSS и понимание того, как браузер рисует текст.

Начать можно с базы и прочитать, что такое CSS. Программы по стилям собраны в разделе курсов по CSS, а ниже пять курсов по HTML из каталога.

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
HTML и CSS с нуля Перейти на сайт курса	Skillbox	91 626 ₽	7635 ₽/мес.	11 месяцев	Обзор курса
HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса	HTML Academy	23 400 ₽	3900 ₽/мес.	2 месяца	Обзор курса
Основы вёрстки HTML и CSS Перейти на сайт курса	Академия Синергия	32 676 ₽	2723 ₽/мес.	3 месяца	Обзор курса
HTML и CSS с нуля	Skypro	195 160 ₽	7972 ₽/мес.	12 месяцев	Обзор курса
Онлайн-курс Вёрстка на HTML и CSS Перейти на сайт курса	Бруноям	36 900 ₽	2491 ₽/мес.	3 месяца	Обзор курса

• 

  HTML и CSS с нуля

  Skillbox91 626 ₽7635 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор
• 

  HTML и CSS. Адаптивная вёрстка и автоматизация

  HTML Academy23 400 ₽3900 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  Основы вёрстки HTML и CSS

  Академия Синергия32 676 ₽2723 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  HTML и CSS с нуля

  Skypro195 160 ₽7972 ₽/мес12 месяцев
  Обзор
• 

  Онлайн-курс Вёрстка на HTML и CSS

  Бруноям36 900 ₽2491 ₽/мес3 месяца
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по HTML