Gerador de Triângulo CSS
Crie triângulos puros com CSS usando o truque das bordas. Escolha direção (cima, baixo, esquerda, direita), tamanho e cor. Útil para tooltips, setas e ponteiros. Tudo no navegador.
Como funciona?
O truque das bordas aproveita um detalhe da renderização: quando um elemento tem largura e altura zero, suas bordas se encontram em diagonais. Tornando três das quatro bordas transparentes e a quarta colorida, restam apenas dois triângulos retângulos formando uma seta.
Útil para tooltips, balões de fala, indicadores de seleção e setas de carrosséis sem precisar de SVG ou imagens. Tudo no navegador.
Setas e ponteiros sem SVG nem imagem
A setinha do tooltip, o ponteiro do balão de fala, o indicador do dropdown: casos pequenos demais para justificar um SVG, mas chatos de escrever na unha. O triângulo de CSS puro resolve com meia dúzia de linhas, só que ninguém decora qual borda pinta e qual fica transparente para cada direção. Aqui você clica numa das oito direções, define largura, altura e cor, confere o preview e copia o bloco pronto.
O truque explora como o navegador desenha bordas: num elemento com width e height zero, as quatro bordas se encontram em diagonais. Pinte uma e deixe as vizinhas transparentes e o que sobra é um triângulo. Nas quatro direções retas, o gerador usa duas bordas laterais com metade da largura cada, e a altura do triângulo vira a espessura da borda colorida; nas quatro diagonais de canto, a construção muda e ele combina duas bordas inteiras para formar o triângulo retângulo.
Para encaixar num tooltip, cole o código num pseudo-elemento ::after com position: absolute e posicione junto à borda do balão, assim você não suja o HTML com div extra. A técnica tem limites claros: borda aceita apenas cor sólida, então nada de gradiente, contorno ao redor do triângulo ou imagem de fundo na forma; nesses casos, parta para clip-path ou SVG. O gerador aceita de 20 a 400 px por lado e roda todo no navegador.
Perguntas frequentes
Como uso a seta num tooltip real?
Dá para fazer o triângulo com gradiente ou com contorno?
Por que o CSS gerado tem width e height zero?
Ferramentas Relacionadas
Gerador de Border Radius CSS
Crie formas arredondadas customizadas com 8 controles independentes (4 cantos × 2 eixos). Veja o preview em tempo real e copie o CSS pronto. Tudo no navegador.
Calculadora de Clamp CSS
Gere valores CSS clamp() para tipografia e espaçamentos fluidos. Informe os tamanhos mínimo/máximo e as larguras de viewport — o resultado é o clamp() pronto para colar no CSS.
Gerador de Loader CSS
Crie spinners e loaders em CSS puro com 8 estilos (anel, pontos, pulso, barras, etc.). Ajuste cor, tamanho e velocidade. Sem libs, sem GIFs. Tudo no navegador.