Este generador de triángulos CSS crea triángulos usando el clásico «truco del borde» (border trick), sin imágenes ni SVG. Elige la dirección, el tamaño y el color, y copia el CSS listo para usar en tooltips, flechas y menús. Funciona en tu navegador, sin registro y en español.
Cómo crear un triángulo en CSS
- Elige la dirección (arriba, abajo, lados o diagonales).
- Ajusta el ancho, el alto y el color.
- Copia el CSS y aplícalo a un elemento vacío.
Cómo funciona el truco del borde
Un elemento con width:0; height:0 y bordes gruesos muestra cuatro triángulos (uno por borde). Si haces transparentes tres de ellos y coloreas solo uno, obtienes un triángulo. Es la técnica más ligera y compatible. ¿Lo quieres para un bocadillo o una tarjeta? Combínalo con sombras y bordes desde nuestro generador CSS Matic.
Preguntas frecuentes
¿Por qué el elemento tiene ancho y alto 0?
Porque el triángulo se forma solo con los bordes. Si el elemento tuviera tamaño, aparecería una caja además de los bordes.
¿Puedo usarlo para la flecha de un tooltip?
Sí, es el uso más habitual. Colócalo con position:absolute pegado al bocadillo.
¿Es mejor que un SVG?
Para triángulos simples es más ligero y no requiere archivos externos. Para formas complejas, mejor SVG o clip-path.
¿Te ha sido útil este contenido? Puedes invitarme a un café para ayudar a mantener el proyecto.
Invítame a un café
