Gerador de Triângulos e Setas CSS
Gere triângulos CSS com o border trick.
Escolha direção, tamanho e cor — copie o código instantaneamente.
Sobre
O Gerador de Triângulos CSS cria triângulos CSS usando o clássico border trick — sem necessidade de imagens. Suporta todas as 8 direções (cima, baixo, esquerda, direita e 4 diagonais).
Perfeito para balões de fala, setas de dropdowns, chevrons de navegação e qualquer decoração de UI. O código gerado pode ser colado diretamente no seu projeto. Todo o processamento é feito localmente no seu navegador.
Como Usar
Escolher Direção
Selecione na grade 3×3 para qual direção seu triângulo deve apontar. Todas as 8 posições são suportadas.
Ajustar Parâmetros
Use os sliders de largura e altura e o seletor de cores para personalizar seu triângulo. A prévia é atualizada em tempo real.
Copiar Código
Clique em "Copiar CSS" ou "Copiar HTML" para copiar o código gerado para a área de transferência e cole no seu projeto.
Glossário
- Border Trick
- Uma técnica CSS para criar triângulos definindo largura e altura como 0, depois aplicando bordas coloridas e transparentes.
- transparent
- Um valor de cor CSS que significa totalmente transparente. Usado para ocultar os lados indesejados da borda para formar um triângulo.
- clip-path
- Uma propriedade CSS que recorta um elemento em uma forma. Uma alternativa ao border trick, suporta formas mais complexas mas requer navegadores modernos.
- Balão de Fala
- Um elemento de UI em formato de balão usado em interfaces de chat. Um triângulo forma o "rabo" que aponta para o falante.
- Pseudo-elemento (::before/::after)
- Elementos virtuais CSS usados para fixar o triângulo a uma caixa sem adicionar marcação HTML extra.
FAQ
- Q.Border trick vs. clip-path — qual devo usar?
- O border trick funciona em navegadores mais antigos. clip-path suporta formas mais complexas, mas pode não funcionar em todos os navegadores antigos. Qualquer um é adequado para projetos modernos.
- Q.Posso fazer um triângulo equilátero?
- Você pode aproximar um ajustando a proporção largura/altura. Para um triângulo para cima, defina largura ≈ altura × 2 como ponto de partida.
- Q.Algum dado é enviado a um servidor?
- Não. Tudo é gerado localmente no seu navegador. Nenhum dado é transmitido.
- Q.Posso fazer um triângulo responsivo?
- Substitua os valores px gerados por unidades em, rem ou vw manualmente para tornar o triângulo responsivo.
- Q.Pode gerar CSS para um balão de fala completo?
- Esta ferramenta foca exclusivamente em gerar o CSS para a parte do triângulo. Um balão de fala completo é tipicamente implementado combinando o triângulo com pseudo-elementos ::before/::after.
Casos de Uso
Balões de Chat
Adicione um "rabo" triangular a balões de mensagem em UIs de chat ou notificação.
Setas de Acordeão e Dropdown
Use triângulos para cima/baixo para indicar estados aberto/fechado em menus.
Setas de Select Personalizadas
Substitua setas padrão de caixas select por triângulos CSS estilizados.
Navegação de Carousel
Crie botões de seta esquerda/direita para sliders sem usar fontes de ícones.
Enviar feedback
Deixe-nos saber sua opinião para nos ajudar a melhorar a ferramenta.
O feedback está temporariamente suspenso
O servidor está ocupado ou a proteção contra spam está ativa. Tente novamente mais tarde.