Gerador de Triângulo CSS

Escolhe uma direção, tamanho e cor para construir um triângulo em CSS puro, depois copia o código. Isto usa a clássica técnica da div com largura e altura zero com bordas transparentes — sem ficheiros de imagem, sem SVG, sem clip-path — apenas algumas declarações border que qualquer navegador entende.

O que é esta ferramenta?

O CSS não tem uma forma de triângulo dedicada, por isso os triângulos são construídos com um truque bem conhecido: pega num elemento com largura e altura zero, dá-lhe uma borda sólida de um lado e bordas transparentes nos outros dois lados adjacentes. Como as bordas adjacentes se encontram num ângulo de 45 graus, as bordas transparentes afunilam até um ponto, deixando visível apenas a borda colorida, em forma de triângulo.

Esta ferramenta constrói essa estrutura por ti: escolhe a direção para onde o triângulo deve apontar, o tamanho que deve ter e a cor, depois observa a pré-visualização ao vivo a atualizar-se e copia o CSS exato. É o mesmo truque usado por toda a web para setas apenas em CSS, ponteiros de tooltips e setas de menus suspensos.

Fonte: CSS Backgrounds and Borders Module Level 3, W3C — define como as bordas adjacentes se encontram em ângulo, que é o mecanismo em que esta técnica de triângulo se baseia.

Por que usar?

A pré-visualização ao vivo renderiza o triângulo real para que confirmes tamanho, direção e cor antes de copiar seja o que for.
Cobre as quatro direções básicas — cima, baixo, esquerda, direita — com um único controlo.
Não precisa de ficheiros de imagem nem SVG — um triângulo construído assim são apenas algumas linhas de CSS.
Útil para ponteiros de tooltips, setas de menus suspensos/acordeões, marcadores de lista personalizados e formas decorativas simples.
Funciona inteiramente no seu navegador — nada do que você configura é enviado para lado nenhum.
Grátis, sem registo, funciona em celular.

Como usar

Escolhe uma direção — o triângulo aponta para cima, baixo, esquerda ou direita, dependendo de qual lado recebe a borda sólida.
Define o tamanho — controla o valor de border-width nos três lados e determina o quão grande o triângulo aparece.
Escolhe uma cor para a borda visível (sólida), que se torna a cor de preenchimento do triângulo.
Copia o CSS gerado e aplica-o a um elemento com width: 0 e height: 0 — uma <div> vazia ou um pseudo-elemento como ::before/::after funcionam ambos bem.

Exemplo

Entrada

Direção: baixo · Tamanho: 60px · Cor: #ea580c

Resultado

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea580c;

Para um triângulo apontando para baixo, a cor sólida vai em border-top enquanto as bordas esquerda e direita ficam transparentes — o lado oposto à direção para onde o triângulo aponta.

Por que a largura e altura zero importam

O truque só funciona porque o elemento não tem uma caixa de conteúdo própria — width: 0 e height: 0 significam que toda a forma visível vem puramente das bordas que se encontram no ponto central. Se o elemento tiver qualquer largura ou altura, as bordas deixam de afunilar até um ponto limpo e a forma quebra. É também por isso que a técnica funciona igualmente bem numa <div> vazia ou num pseudo-elemento ::before/::after com content: "" — não é preciso conteúdo real, apenas a caixa da borda.

A documentação do MDN sobre a propriedade CSS border explica como border-width, border-style e border-color se combinam, incluindo como as bordas de lados adjacentes se encontram na diagonal (developer.mozilla.org/en-US/docs/Web/CSS/border) — o facto geométrico sobre o qual toda esta técnica é construída.

Usos comuns dos triângulos CSS

Ponteiros de tooltips e balões de fala: um pequeno triângulo (6–10px) posicionado na borda de uma caixa arredondada, colorido para combinar com o fundo da caixa.
Setas de menus suspensos e select: um pequeno triângulo para baixo ao lado de um botão ou elemento select para indicar que abre um menu.
Indicadores de acordeão/expansão: um triângulo apontando para a direita que roda para apontar para baixo quando uma secção é expandida.
Marcadores de lista personalizados: um pequeno triângulo apontando para a direita em vez do marcador padrão do navegador, para um estilo de lista mais distinto.
Cantos de banner/fita simples: um triângulo encaixado no canto de um cartão para simular um efeito de fita dobrada.

Combinar com outras ferramentas CSS

Os triângulos usados como ponteiros de tooltips geralmente precisam de uma sombra correspondente para encaixar visualmente com a caixa a que estão ligados — o Gerador de Box Shadow produz essa sombra. Para formas de interface além de triângulos (chevrons, estrelas, hexágonos), o clip-path costuma ser a melhor abordagem moderna em vez de empilhar mais truques de bordas.

→ Gerador de Box Shadow · Gerador de Border Radius

Perguntas frequentes

Por que a cor vai na borda oposta à direção para onde o triângulo aponta?

Imagina o elemento como um losango feito de quatro segmentos de borda triangulares que se encontram no meio. Se a cor sólida está na borda superior, a forma visível ocupa a metade superior — mas como o elemento tem tamanho zero, esse triângulo de 'metade superior' na verdade aponta para baixo, para onde estaria a inexistente caixa de conteúdo do elemento. A mesma lógica aplica-se às quatro direções.

Posso fazer um triângulo que não seja perfeitamente isósceles?

Sim — esta ferramenta gera sempre um triângulo simétrico por simplicidade, mas podes editar o CSS copiado manualmente depois. Tornar as duas border-width transparentes desiguais inclina o triângulo para um lado; mudar a largura da borda sólida de forma independente altera a sua altura sem afetar a largura da base.

Esta técnica funciona em todos os navegadores?

Sim — o truque do triângulo baseado em bordas depende apenas do suporte básico de border-width, border-style e border-color, que existe desde as primeiras implementações de CSS. É uma das técnicas de formas em CSS puro mais amplamente compatíveis disponíveis.

Quando devo usar clip-path em vez do truque das bordas?

O truque das bordas é ideal especificamente para triângulos simples, já que não precisa de propriedades extra e funciona em todo o lado. Para algo mais complexo — pentágonos, estrelas, setas com um entalhe, ou recortes diagonais numa caixa que ainda precisa de mostrar uma imagem de fundo — o clip-path é mais flexível e mais fácil de raciocinar, embora tenha suporte mais limitado em navegadores antigos.

Posso colocar texto ou um ícone dentro do triângulo?

Não diretamente — como o elemento do triângulo tem largura e altura zero, não há caixa de conteúdo para alojar nada. Para combinar um triângulo com texto ou um ícone, usa-o como um pseudo-elemento decorativo (::before/::after) num elemento pai que o posicione de forma absoluta, e depois estiliza o conteúdo real do pai separadamente.