Gerador de Triângulos CSS

Triângulos CSS são criados usando o truque de borda — um elemento com largura e altura zero e bordas coloridas/transparentes forma um triângulo. Esta ferramenta permite escolher a direção, tamanho e cor, e gera instantaneamente o código CSS.

Explorar todas as ferramentas de Gerador

Como Usar

Selecione uma direção (Cima, Baixo, Esquerda, Direita ou diagonal), ajuste os controles deslizantes de largura e altura, escolha uma cor e copie o CSS gerado. Cole-o em sua folha de estilos e aplique a classe .triangle.

Casos de Uso Comuns

• •Criar indicadores de seta e ponteiros na UI
• •Construir setas de tooltip e setas de dropdown
• •Projetar divisores de seção decorativos diagonais
• •Criar separadores de breadcrumb e ícones de seta
• •Balões de fala CSS puros com caudas triangulares