1001Ferramentas
Dev

Gerador de Triângulo CSS

Crie triângulos puros com CSS usando o truque das bordas. Escolha direção (cima, baixo, esquerda, direita), tamanho e cor. Útil para tooltips, setas e ponteiros. Tudo no navegador.

Como funciona?

O truque das bordas aproveita um detalhe da renderização: quando um elemento tem largura e altura zero, suas bordas se encontram em diagonais. Tornando três das quatro bordas transparentes e a quarta colorida, restam apenas dois triângulos retângulos formando uma seta.

Útil para tooltips, balões de fala, indicadores de seleção e setas de carrosséis sem precisar de SVG ou imagens. Tudo no navegador.

Ferramentas Relacionadas