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

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.

Ferramentas relacionadas

Gerador de Border Radius

Arraste cantos individualmente, teste raios elípticos, copie o CSS — com presets chat-bubble, pill, blob e tab.

Cor 0 0

Construtor de CSS clip-path (polígono, círculo)

Construtor visual da propriedade CSS `clip-path` — escolha uma forma (círculo, elipse, inset ou polígono), ajuste números com sliders ou clique na pré-visualização para adicionar pontos do polígono, e copie uma declaração CSS pronta para colar. Inclui 10 presets de forma (triângulo, hexágono, estrela, seta, balão, mais, …).

Cor 0 0

Gerador de Gradientes CSS

Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.

Cor 0 0

Gerador de CSS Box Shadow

Desenhe box-shadow CSS visualmente em várias camadas, com pré-visualização ao vivo e saída CSS / Tailwind pronta para copiar.

Cor 0 0

Playground de Filtros CSS

Componha visualmente blur, brightness, contrast, hue, sepia, invert e mais — copie o filtro CSS ou valor arbitrário Tailwind.

Cor 0 0

Gerador de Curva Cubic-Bezier CSS

Arraste os pontos de controle para projetar uma curva de easing CSS — preview do movimento, copie cubic-bezier().

Cor 0 0