Gerador de Triângulos CSS

O Gerador de Triângulos CSS é uma ferramenta interativa que permite criar triângulos CSS puros sem usar imagens ou SVG. Ele aproveita o truque de bordas CSS para produzir triângulos em 8 direções (cima, baixo, esquerda, direita e quatro diagonais) com tamanho e cor personalizáveis. O código CSS gerado pode ser copiado diretamente para o seu projeto.

Selecione uma direção de triângulo entre os botões de direção (cima, baixo, esquerda, direita ou diagonal). Ajuste a largura e a altura usando os controles deslizantes para controlar as dimensões do triângulo. Escolha uma cor usando o seletor de cores. A visualização é atualizada em tempo real e o código CSS gerado aparece na parte inferior. Clique no botão copiar para copiar o CSS para a área de transferência.

Os triângulos CSS usam uma técnica inteligente com bordas. Quando um elemento tem largura e altura zero, suas bordas se encontram no ponto central. Tornando algumas bordas transparentes e outras coloridas, cria-se a aparência de um triângulo. Por exemplo, um triângulo apontando para cima usa bordas esquerda e direita transparentes com uma borda inferior colorida. As larguras das bordas determinam o tamanho e as proporções do triângulo.

O gerador suporta 8 direções: cima, baixo, esquerda, direita, superior esquerda, superior direita, inferior esquerda e inferior direita. Os triângulos diagonais usam apenas duas bordas em vez de três, criando um triângulo retângulo. A largura controla a base do triângulo e a altura controla sua altura. Para um triângulo isósceles perfeito, defina largura e altura com o mesmo valor.

Os triângulos CSS são comumente usados para setas de tooltips, ponteiros de menus suspensos, caudas de balões de fala, separadores de breadcrumbs e elementos decorativos. São leves, não requerem solicitações HTTP adicionais e escalam perfeitamente em qualquer resolução. Combine-os com transições e transformações CSS para animações suaves.