Genera triángulos, flechas e indicadores direccionales en puro CSS con un editor visual en tiempo real. Elige entre 12 direcciones predefinidas, personaliza tamaño y color, y copia CSS listo para producción al instante. Sin imágenes — 100% del lado del cliente.
El Generador de Triángulos CSS crea triángulos y flechas en puro CSS usando la técnica de bordes — sin imágenes, sin SVG, sin dependencias externas. Los triángulos CSS funcionan estableciendo tres bordes transparentes y uno de color sólido, creando la ilusión de un triángulo. Esta técnica ha sido un pilar del desarrollo web desde los primeros días de CSS y sigue siendo la forma más ligera de añadir indicadores direccionales, tooltips y elementos decorativos a cualquier página web. Todo el procesamiento ocurre en tu navegador — no se envían datos.
Los triángulos CSS se crean usando bordes. Cuando un elemento tiene ancho y altura cero pero bordes gruesos, los bordes se encuentran en ángulos de 45 grados. Al hacer tres bordes transparentes y uno de color sólido, obtienes un triángulo que apunta en la dirección del borde sólido. Es un truco clásico de CSS que no requiere recursos externos.
Absolutamente. Los triángulos CSS son compatibles con todos los navegadores modernos y lo han sido durante más de una década. Se usan comúnmente para flechas de dropdowns, punteros de tooltips, colas de burbujas de diálogo, indicadores de pasos y elementos decorativos en sitios web principales.
Los presets de triángulo crean triángulos puros con ancho y altura cero. Los presets de flecha añaden una base rectangular al triángulo, creando una forma de flecha útil para indicadores de navegación, botones de volver arriba y punteros direccionales.
Un triángulo equilátero verdadero en CSS requiere una proporción específica de border-width porque el triángulo visible es en realidad un triángulo rectángulo isósceles de 45 grados formado por las esquinas del borde. Para aproximar un triángulo equilátero, la altura necesita ser aproximadamente el 86.6% del ancho de la base (ratio √3/2), que esta herramienta calcula automáticamente.