Generated CSS
Triângulos CSS aparecem em tooltips, setas de dropdown, balões de diálogo, divisores e formas decorativas. Podem ser criados por três técnicas distintas, cada uma com diferentes compensações em relação ao suporte de navegadores, compatibilidade com background-image, comportamento de box-shadow e capacidades de animação.
O truque de bordas é a técnica mais antiga e compatível. Ele explora uma propriedade geométrica raramente notada das bordas CSS: quando um elemento tem zero de largura e zero de altura, suas quatro bordas ainda ocupam espaço e se encontram no centro do elemento. Tornar três das quatro bordas transparentes deixa um único triângulo visível apontando para longe da borda colorida.
O truque de bordas tem uma limitação significativa: box-shadow projeta sombra sobre o retângulo delimitador invisível em vez da forma do triângulo. Para formas triangulares que precisam de sombras, use filter: drop-shadow() aplicado a um elemento envolvente.
A abordagem clip-path: polygon() pega um elemento retangular normal e o recorta em forma de triângulo. Ao contrário do truque de bordas, o elemento mantém sua estrutura retangular normal — ainda tem um fundo, pode receber box-shadow e pode conter conteúdo. A vantagem principal é que filter: drop-shadow() segue a forma recortada.
Setas de tooltip são a aplicação mais comum de triângulos CSS. A abordagem padrão usa um pseudo-elemento ::before ou ::after no contêiner do tooltip, posicionado absolutamente para se estender além da borda do tooltip.
Triângulos de canto são produzidos com o truque de bordas usando apenas duas bordas em vez de três. São comumente usados como decorações "ribbon" em cards e como emblemas de "sale" ou "new".
A abordagem clip-path: polygon() permite animações de mudança de forma que o truque de bordas não pode fazer. Como os valores de clip-path podem ser transicionados quando tanto o início quanto o fim têm o mesmo número de pontos de polígono, você pode animar um triângulo mudando de direção.
Para o truque de bordas, a altura de um triângulo equilátero é sua largura multiplicada por √3/2 ≈ 0.866. Com clip-path, você pode usar aspect-ratio: 1 / 0.866 em um elemento responsivo.
O ícone de chevron clássico se faz com um elemento quadrado com duas bordas rotacionado 45 graus. Isso produz a forma clássica de chevron de seta de dropdown.
O truque de bordas produz um triângulo visualmente, mas a caixa delimitadora do elemento ainda é um retângulo de zero dimensões. Use filter: drop-shadow() em um elemento envolvente.
O truque de bordas não pode acomodar preenchimentos de gradiente. Para um triângulo de gradiente, use clip-path: polygon() com qualquer gradiente como fundo do elemento.
Com clip-path, sim. Defina ambas as orientações como valores polygon() com o mesmo número de pontos e transicione entre elas.
Use o truque de bordas via pseudo-elemento (::before ou ::after) para setas de tooltip. Produz a menor quantidade de código e funciona em todos os navegadores.
Empilhe dois triângulos de truque de bordas usando um pseudo-elemento: o elemento base produz o triângulo externo maior na cor da borda, e seu pseudo-elemento ::after produz um triângulo ligeiramente menor na cor do fundo.