Por que o truque de border funciona?

Um elemento de largura 0 com bordas grossas é renderizado como 4 triângulos que se encontram num ponto. Faça 3 transparentes e 1 colorida — só esse triângulo aparece.

Border é mais antigo (IE6) e tem mini diferenças de antialiasing. clip-path é mais limpo e combina melhor com fundos/imagens — preferível para código novo.

Para ângulos não-padrão, use clip-path e ajuste os pontos do polygon. As 8 direções cobrem setas, tooltips, breadcrumbs.

Border-triangle é universal. clip-path funciona em todos os navegadores desde 2016 — seguro em 2026.

Gerador de Triângulos CSS

Cor

O truque clássico de triângulo CSS: um elemento de tamanho zero com bordas coloridas grossas vira um triângulo apontando para o lado oposto ao colorido. A ferramenta oferece 8 direções (cima/baixo/esq/dir + 4 triângulos de canto), slider de tamanho e seletor de cor. Ative 'clip-path' para a alternativa moderna — mesma forma, sem bordas, mais fácil de dimensionar com width/height.

—

Direção

Tamanho: 80pxCor

Usar clip-path

Pré-visualização

CSS

.triangle {
  width: 0;
  height: 0;
  border-bottom: 80px solid #5b8def;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
}

Triângulos por border usam um elemento de tamanho zero com bordas coloridas grossas — os lados transparentes se cancelam, deixando só o triângulo colorido visível.

Como usar

Escolha direção (▲▼◀▶ ou os 4 cantos).
Defina tamanho e cor.
Opcionalmente ative clip-path para algo mais limpo.
Copie o CSS para o seu projeto.

Perguntas frequentes

Por que o truque de border funciona?: Um elemento de largura 0 com bordas grossas é renderizado como 4 triângulos que se encontram num ponto. Faça 3 transparentes e 1 colorida — só esse triângulo aparece.
Border vs clip-path?: Border é mais antigo (IE6) e tem mini diferenças de antialiasing. clip-path é mais limpo e combina melhor com fundos/imagens — preferível para código novo.
Posso rotacionar?: Para ângulos não-padrão, use clip-path e ajuste os pontos do polygon. As 8 direções cobrem setas, tooltips, breadcrumbs.
Suporte?: Border-triangle é universal. clip-path funciona em todos os navegadores desde 2016 — seguro em 2026.