Ele usa bordas transparentes em um elemento de tamanho zero, colorindo apenas um lado.

Posso usá-lo para setas?

Sim, os triângulos CSS são comuns em dicas de ferramenta (tooltips) e setas de menus suspensos.

Gerador de Triângulo CSS

Gere triângulos CSS usando o truque das bordas.

DireçãoLargura: 80pxAltura: 60pxCor

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

Crie um triângulo em CSS puro em qualquer direção, tamanho e cor, e copie o código das bordas.

Como funciona?: Ele usa bordas transparentes em um elemento de tamanho zero, colorindo apenas um lado.
Posso usá-lo para setas?: Sim, os triângulos CSS são comuns em dicas de ferramenta (tooltips) e setas de menus suspensos.