Gerador de triângulos CSS

O truque das bordas, um hack CSS de 25 anos que ainda funciona

A técnica do triângulo CSS explora como o algoritmo de pintura de bordas do CSS lida com bordas adjacentes. Quando duas bordas se encontram num canto, o limite entre elas é desenhado como uma linha diagonal no ângulo que bissecta o canto. Com um elemento de tamanho normal, o canto é pequeno e a diagonal mal aparece. Mas se você definir a largura e a altura do elemento como zero e der bordas grossas a ele, os cantos tomam todo o espaço visual, e o que era uma diagonal invisível vira a aresta visível de um triângulo. Torne três das quatro bordas transparentes, deixe a quarta colorida, e você desenhou um único triângulo apontando para longe do lado colorido. A técnica foi amplamente documentada por volta de 2007–2008 nos primeiros artigos do CSS-tricks por Chris Coyier e outros; desde então é item básico da caixa de ferramentas do designer web porque produz uma forma nítida, escalável e colorível em hex, sem SVG, sem PNG, sem requisição HTTP extra e sem CSS complicado. A matemática é simples mas contraintuitiva (a altura do triângulo é a largura de borda do lado colorido; sua base é o dobro da largura de borda do lado transparente adjacente). Este gerador faz a conta, você arrasta controles em vez de calcular larguras de borda.

Alternativas modernas, clip-path, SVG, conic-gradient

Em 2026, o triângulo por bordas tem concorrência. CSS clip-path com a função polygon() (CSS Masking Module Level 1, suporte baseline desde 2017) permite recortar qualquer elemento num polígono arbitrário: clip-path: polygon(50% 0, 100% 100%, 0 100%) desenha um triângulo apontando para cima em qualquer elemento. clip-path é mais flexível (qualquer número de vértices, não só três; funciona em qualquer elemento com conteúdo, não só divs vazios), compõe melhor com transformações e animações, e suporta cantos arredondados via a função mais nova shape(). SVG inline (<svg><polygon points="50,0 100,100 0,100"/></svg>) dá o controle máximo, traços, preenchimentos, gradientes, animações via SMIL ou CSS, acessibilidade via elementos <title>. conic-gradient pode produzir formas triangulares via paradas de cor bem posicionadas, mas é mais curiosidade do que padrão prático. O triângulo por bordas continua a escolha certa para o caso decorativo simples (ponteiros de tooltip, indicadores de dropdown, caudas de balões de fala) onde simplicidade e overhead zero importam mais do que flexibilidade; clip-path é melhor quando o triângulo faz parte de uma forma mais complexa, quando é preciso colocar texto dentro, ou quando o design pode precisar de cantos arredondados.

Onde os triângulos CSS justificam seu lugar

• Ponteiros de tooltip e popover. O pequeno triângulo que conecta um balão tooltip ao seu elemento âncora é o caso de uso mais comum, você pode construí-lo como um pseudo-elemento triângulo CSS (::before ou ::after) no tooltip, posicionado na borda voltada para a âncora.
• Caudas de balões de fala. A cauda pontuda em balões de mensagem de chat, cartões de comentário e citações em destaque. Mesma técnica dos ponteiros de tooltip, só que maior e estilizada para combinar com a cor de fundo do balão.
• Indicadores de seta de dropdown. O pequeno triângulo para baixo em selects e botões de menu dropdown. Elementos <select> nativos têm setas com estilo do SO; dropdowns customizados feitos com <button> + popover precisam do seu próprio.
• Indicadores de expandir/recolher de acordeão. O triângulo que alterna entre apontar para a direita (recolhido) e para baixo (expandido) ao clicar numa seção de acordeão. Animado com uma transformação rotate de CSS.
• Separadores de breadcrumb. O triângulo apontando para a direita entre links de breadcrumb. Frequentemente construído como triângulo CSS com ::before.
• Decorações de banners e fitas. A reentrância triangular no fim de um banner ou etiqueta de promoção, a dobra de canto num distintivo «novo», o chevron no fim de uma seção hero apontando para baixo para rolagem. Todos triângulos de uma cor, todos com truque das bordas.
• Separadores decorativos. Uma fileira de pequenos triângulos como separadores de seção, sobreposições de padrões geométricos, floreios de estilo retrô.

Considerações de acessibilidade

Triângulos CSS são pura decoração visual, não têm significado semântico nem presença na árvore de acessibilidade. Leitores de tela não os anunciam. Para uso puramente decorativo (a cauda do balão, o separador de breadcrumb) este é o comportamento correto. Para triângulos que transmitem significado (uma seta apontando para a seção ativa, uma seta de menu indicando «clique para mais»), o significado precisa ser comunicado por outros meios: um atributo aria-expanded num gatilho de dropdown, um rótulo de texto visível, um aria-label no botão. Não conte com um triângulo CSS para comunicar estado; trate-o como um reforço visual de um estado comunicado semanticamente por outros atributos. O conteúdo dos pseudo-elementos CSS ::before e ::after em geral não é lido por leitores de tela, o que é apropriado para formas decorativas.

Tipos de triângulos que este gerador produz

• Cima / Baixo: triângulos isósceles apontando para cima ou para baixo, a forma mais comum para tooltips e indicadores de acordeão.
• Esquerda / Direita: apontando para a esquerda ou direita, usados para breadcrumbs e destaques de coluna lateral.
• Cantos superior-esquerdo / superior-direito: triângulos retângulos que se encaixam no canto de um elemento contêiner. Usados para efeitos de dobra de fita e de distintivo de canto.
• Cantos inferior-esquerdo / inferior-direito: triângulos retângulos para os cantos opostos.
• Aspecto personalizado: proporção largura/altura ajustável para formas não equiláteras, útil quando se quer um ponteiro alto e estreito ou um chevron largo e plano.

Ferramentas relacionadas