Generador de triángulo CSS
Compón un triángulo en CSS puro gracias al truco clásico de los bordes transparentes, con vista previa en vivo y código listo para copiar.
Cómo funciona
El truco se basa en el hecho de que un elemento sin ancho ni alto, con bordes gruesos, muestra bordes que se unen en punta. Al hacer transparentes dos bordes y colorear el tercero, se obtiene un triángulo que apunta en la dirección deseada — sin necesidad de imagen ni SVG para una flecha de tooltip o un cursor decorativo.
¿Por qué usar este truco en lugar de una imagen?
Un triángulo CSS puro no requiere ninguna solicitud de red, se redimensiona perfectamente y cambia de color al instante mediante una variable CSS, a diferencia de una imagen de mapa de bits o incluso un SVG externo.
¿Puedo animar el color o el tamaño del triángulo?
Sí, al tratarse de propiedades CSS estándar (border-color, border-width), pueden hacerse transiciones o animarse con transition o @keyframes como cualquier otra propiedad CSS.
Procesamiento 100% local: el código se genera íntegramente en tu navegador mediante WebAssembly.