Categoria: Desenvolvimento
Gerador de triângulo CSS
Construa um triângulo em CSS puro com o truque das bordas
Escolha uma direção, um tamanho e uma cor para construir uma caixa de tamanho zero com bordas coloridas que é renderizada como um triângulo, com pré-visualização ao vivo e a declaração CSS pronta para copiar. Tudo é calculado no seu navegador.
width: 0; height: 0; border-right: 80px solid transparent; border-bottom: 80px solid #0f7b63; border-left: 80px solid transparent;
Tudo nesta página é processado no seu navegador. Nada é enviado.
Para que serve
Um triângulo em CSS é uma caixa com `width: 0; height: 0;` cujas bordas recebem cor em um dos lados e ficam transparentes nos dois lados adjacentes, de modo que apenas a cunha da borda colorida aparece. É fácil errar isso à mão — o par de lados trocado, ou uma borda deixada sólida em vez de transparente — então esta ferramenta constrói as quatro declarações a partir de uma direção, um tamanho e uma cor, e mostra o resultado em uma caixa real conforme você os altera.
Como usar
- Escolha uma direção: para cima, para baixo, para a esquerda ou para a direita.
- Defina o tamanho e a cor.
- Copie as declarações de borda para a sua folha de estilos.
Privacidade
Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.
Perguntas frequentes
- Algo é enviado a um servidor?
- Não. A pré-visualização é uma borda CSS real renderizada pelo seu navegador, e a declaração é um texto montado na página.
- Por que o triângulo precisa de width e height definidos como 0?
- O truque das bordas depende de as bordas se encontrarem em um ponto, em vez de emoldurar uma caixa. Um width ou height diferente de zero achataria a cunha em um trapézio.
- Posso usar isso para uma seta em uma dica de contexto ou balão de fala?
- Sim — esse é o uso mais comum. Posicione o triângulo de forma absoluta contra a borda da dica de contexto e combine sua cor com o fundo dela.