Gerador de Triângulos CSS

Crie triângulos CSS puros usando a técnica do border hack. Escolha direção, tamanho e cor com pré-visualização e CSS pronto para copiar.

CSS Triangle Generator

Create pure CSS triangles using the border hack.

Width100px

Height100px

Color

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 100px 50px;
  border-color: transparent transparent #10b981 transparent;
}

Como usar o Gerador de Triângulos CSS

Escolha a direção do triângulo: cima, baixo, esquerda ou direita.
Ajuste os controles de largura e altura para dimensionar o triângulo.
Escolha uma cor usando o seletor de cor.
Copie o CSS gerado e cole na sua folha de estilos.

Sobre Triângulos CSS

Triângulos CSS são criados com um truque: definir largura e altura como zero com bordas grossas transparentes, depois colorir uma borda para criar uma forma triangular.

Esta técnica é usada para setas de tooltips, indicadores de dropdown e elementos decorativos — tudo sem imagens ou SVGs.

Perguntas frequentes

Como funciona o truque do triângulo CSS? ▼

Com largura e altura em 0 e bordas grossas, as bordas formam quatro triângulos. Três transparentes revelam um triângulo visível.

Posso criar formas diferentes? ▼

Este gerador cria triângulos. Para outras formas, use border-radius ou clip-path.

Funciona em todos os navegadores? ▼

Sim. A técnica de bordas é uma das mais antigas e compatíveis do CSS.