Gerador de triângulo CSS
Componha um triângulo em CSS puro usando o truque clássico das bordas transparentes, com pré-visualização ao vivo e código pronto para copiar.
Como funciona
O truque se baseia no fato de que um elemento sem largura nem altura, com bordas espessas, exibe bordas que se encontram em ponta. Ao tornar duas bordas transparentes e colorir a terceira, obtém-se um triângulo apontando na direção desejada — sem necessidade de imagem nem SVG para uma seta de tooltip ou um cursor decorativo.
Por que usar esse truque em vez de uma imagem?
Um triângulo CSS puro não requer nenhuma requisição de rede, redimensiona-se perfeitamente e muda de cor instantaneamente via uma variável CSS, ao contrário de uma imagem bitmap ou mesmo de um SVG externo.
Posso animar a cor ou o tamanho do triângulo?
Sim, como se trata de propriedades CSS padrão (border-color, border-width), elas podem ter transições ou ser animadas com transition ou @keyframes como qualquer outra propriedade CSS.
Processamento 100% local: o código é gerado inteiramente no seu navegador via WebAssembly.