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

Генерирует CSS-треугольники с помощью трюка с границами.

НаправлениеШирина: 80pxВысота: 60pxЦвет

width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 60px solid #6366f1;

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

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

Выберите направление и размер.
Выберите цвет.
Скопируйте CSS.

Частые вопросы

Как это работает?: Используются прозрачные границы у элемента нулевого размера, при этом закрашивается только одна сторона.
Можно ли использовать для стрелок?: Да, CSS-треугольники часто применяют для подсказок и стрелок выпадающих меню.

Похожие инструменты