Как пользоваться: Генератор CSS-треугольников
- Нажмите на направление: вверх, вниз, влево, вправо или один из углов.
- Задайте ширину, высоту и цвет.
- Выберите Borders (работает везде, подходит для стрелок на
::before/::after) или clip-path (проще читается и поддерживает градиенты). - Скопируйте CSS на элемент или псевдоэлемент.
Два способа нарисовать треугольник
Приём с border: элемент с нулевой шириной и высотой показывает только свои границы, и каждая граница представляет собой треугольник, сходящийся в центре. Если three из них сделать прозрачными, а четвёртую окрасить, получится стрелка без всяких изображений. Её размер задаётся толщиной границ.
clip-path: обычный блок с clip-path: polygon(50% 0, 100% 100%, 0 100%). Его проще читать и настраивать размер, а заливку можно задать градиентом или изображением.
Пример стрелки для подсказки
.tooltip { position: relative; }
.tooltip::after {
content: "";
position: absolute; top: 100%; left: 50%; margin-left: -8px;
border: 8px solid transparent;
border-top-color: #111;
}Другие фигуры: Генератор clip-path, Генератор border-radius, Генератор SVG-блобов.
Также ищут как: стрелка для tooltip css, border треугольник css, css caret.
Инструменты, которые хорошо сочетаются с Генератор CSS-треугольников
- Генератор box-shadow — Добавляйте несколько слоёв теней, меняйте смещение, размытие, spread и непрозрачность на живой карточке, затем скопируйте CSS для box-shadow или text-shadow.
- Генератор CSS-масок — Сделайте изображения и блоки плавно исчезающими вместо резкого обрыва: затухание одного края, сверху и снизу, всех четырёх краёв, радиальная виньетка или прожектор, разрезание элемента на полосы — либо маска в форме фигуры (звезда, сердце, шестиугольник, стрелка…) с мягкими, растушёванными краями, которых не даёт clip-path.
- CSS Grid генератор — Задайте колонки, строки и отступы, затем выделите ячейки, чтобы создать области вроде header, sidebar и main.
- Генератор CSS-анимаций — Создавайте CSS-анимации на таймлайне ключевых кадров.
Часто задаваемые вопросы
Как нарисовать треугольник в CSS?
Задайте элементу width: 0 и height: 0, затем настройте границы: для стрелки вверх сделайте левую и правую границы прозрачными, а нижнюю окрасьте. Этот генератор напишет код для любого направления и размера.
Как добавить стрелку к подсказке (tooltip)?
Добавьте псевдоэлемент ::after с content: "", расположите его у края подсказки и задайте ему границы-треугольник из генератора.
Что выбрать: треугольник на border или clip-path?
Границы работают во всех браузерах и стандартно используются для маленьких стрелок на псевдоэлементах. clip-path проще масштабировать и он поддерживает градиенты.
Может ли CSS-треугольник иметь обводку или тень?
Наложите два треугольника (один чуть больше, в цвете обводки) или примените clip-path к обёртке вместе с filter: drop-shadow() для тени.
Можно ли установить Генератор CSS-треугольников как веб-приложение и пользоваться им офлайн?
Да. Генератор CSS-треугольников — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.