Generador de triángulos y flechas CSS
Crea triángulos en CSS puro sin imágenes ni SVG. Elige una dirección, fija el ancho, el alto y el color, y copia el CSS listo, o gira la forma a cualquier ángulo.
Para formas más allá de los triángulos, el generador de CSS Clip Path es mucho más flexible; la herramienta CSS Triangle cubre la versión del truco de bordes.
Cómo usar Triángulos y flechas CSS
- 1 Elige la dirección a la que debe apuntar el triángulo.
- 2 Fija el ancho y el alto, y elige un color.
- 3 Copia el CSS generado en tu hoja de estilos.
- 4 Ajusta los valores de tamaño si necesitas una proporción distinta.
Cómo funciona
La técnica clásica construye un triángulo a partir de un elemento de tamaño cero con bordes coloreados. Los triángulos apuntados usan dos bordes transparentes y uno visible, que es exactamente lo que genera esta herramienta.
- Hacia arriba, abajo, izquierda, derecha e inclinado
- Formas equiláteras o isósceles
- Efecto de contorno opcional
- Vista previa en vivo sobre fondo cuadriculado
- Exportación CSS y Tailwind
Preguntas frecuentes
¿Cómo funciona un triángulo solo con bordes?
Porque los bordes se encuentran en esquinas biseladas. Dale a un elemento ancho y alto cero y un borde grueso en un lado, y ese borde se renderiza como un triángulo sólido. La técnica se basa en el bisel, así que funciona en todos los navegadores y no necesita imagen ni SVG.
¿Por qué los otros tres bordes son transparentes?
Tienen que serlo, o se verían como cuñas sólidas alrededor del triángulo. Al ponerlos transparentes solo queda visible el borde coloreado, lo que produce una forma limpia en lugar de un cuadrado relleno con un borde de color.
¿Puedo añadir un borde o contorno al triángulo?
No con esta técnica: la forma es un borde, así que no puede tener su propio borde. Si necesitas un triángulo con contorno o redondeado, usa un SVG en línea o un clip-path, que sí se pueden trazar con normalidad.
Generadores y varios relacionadas
También te puede interesar
Herramientas de otras categorías que suelen combinarse con Triángulos y flechas CSS: