ifBuyz Tools
Дизайн

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

Ввод

Выберите направление, ширину основания, высоту и цвет.

Направление
Base Width60px
Высота80px

Скопируйте сгенерированный CSS и примените его к пустому элементу.

Вывод

.triangle {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 80px solid #6366f1;
}

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

Как работает CSS Triangle?
Создаёт треугольник через границы элемента нулевого размера.
Можно ли менять направление треугольника?
Да, выбор активной границы задаёт направление.
Где это обычно используют?
В tooltip, стрелках меню и указателях интерфейса.