Gerador de Triângulo CSS
Gere um triângulo em CSS com o truque clássico das bordas — escolha a direção, defina o tamanho, escolha uma cor, veja uma prévia ao vivo e copie o CSS com width:0; height:0; border.
O Gerador de Triângulo CSS é uma ferramenta gratuita para criar triângulos puramente em CSS usando o truque clássico das bordas. Escolha para onde o triângulo aponta — para cima, para baixo, para a esquerda, para a direita ou para um dos quatro cantos — defina sua largura e altura e escolha uma cor. Uma prévia ao vivo é atualizada na hora, e o CSS gerado com width: 0; height: 0; border fica pronto para copiar direto na sua folha de estilos. Sem imagens, sem SVG e sem dependências.
O que é um gerador de triângulo CSS?
Um triângulo CSS é uma forma desenhada com as bordas de um elemento em vez de uma imagem. Ao definir um elemento com width: 0 e height: 0 e dar a ele bordas grossas, os cantos onde as bordas se encontram formam arestas diagonais. Deixe três bordas transparentes e uma com cor sólida e você fica com um único triângulo. Este gerador transforma suas escolhas de direção, tamanho e cor nesse CSS de bordas, então você não precisa descobrir quais bordas colorir e quais deixar transparentes.
Como fazer um triângulo CSS
Criar um triângulo leva apenas alguns passos:
- Escolha a direção para a qual o triângulo deve apontar: cima, baixo, esquerda, direita ou um canto.
- Defina a largura e a altura em pixels para controlar as proporções do triângulo.
- Escolha uma cor com o seletor ou digitando um valor hexadecimal.
- Confira a prévia ao vivo para confirmar que a forma está correta.
- Copie o CSS gerado e aplique a classe a um elemento da sua página.
Como funciona o truque do triângulo com bordas em CSS?
Quando um elemento não tem largura nem altura, suas quatro bordas se encontram no ponto central, e cada borda é renderizada como um trapézio que afina até virar um triângulo nos cantos. Ao deixar transparentes as duas bordas vizinhas à direção do triângulo e colorir a borda oposta, apenas uma cunha triangular permanece visível. Em um triângulo para cima, por exemplo, as bordas esquerda e direita são transparentes e a borda inferior é colorida, de modo que a forma colorida aponta para cima.
Como mudo o tamanho e a direção do triângulo?
A largura controla a base do triângulo nos triângulos para cima e para baixo e a profundidade nos triângulos para a esquerda e para a direita, enquanto a altura faz o oposto. Para inverter a direção, o gerador troca qual borda leva a cor e quais duas ficam transparentes. As direções de canto usam apenas duas bordas — uma colorida e uma transparente — para produzir um triângulo retângulo ancorado naquele canto.
Por que usar este gerador de triângulo CSS?
- 100% gratuito, sem anúncios, cadastro ou limites.
- Prévia ao vivo atualizada na hora ao mudar direção, tamanho ou cor.
- Gera CSS limpo e padrão que você copia com um clique.
- Suporta as direções cima, baixo, esquerda, direita e os quatro cantos.
- CSS puro — sem imagens, SVG ou dependências externas.
- Roda inteiramente no seu navegador, então nada é enviado.
Perguntas frequentes
O gerador de triângulo CSS é gratuito?
Sim. Todas as ferramentas do ToolsSoup são totalmente gratuitas, sem conta, cadastro ou limites ocultos.
O CSS gerado funciona em todos os navegadores?
Sim. A técnica do triângulo com bordas depende apenas de bordas padrão, então o CSS que esta ferramenta produz funciona em todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge.
Por que o triângulo é feito com bordas em vez de uma imagem?
Triângulos com bordas são minúsculos, escalam nitidamente em qualquer resolução e não exigem nenhuma requisição extra. São ideais para setas de menus, dicas de ferramentas, fitas e balões de fala, onde carregar uma imagem seria desperdício.
Meus dados são enviados para algum lugar?
Não. O gerador roda inteiramente no seu navegador, então nada do que você configura é enviado ou armazenado em servidores.