Generador de Triángulos CSS
Genera un triángulo en CSS con el truco clásico de los bordes: elige la dirección, define el tamaño, escoge un color, mira una vista previa en vivo y copia el CSS con width:0; height:0; border.
El Generador de Triángulos CSS es una herramienta gratuita para crear triángulos puramente en CSS usando el truco clásico de los bordes. Elige hacia dónde apunta el triángulo (arriba, abajo, izquierda, derecha o una de las cuatro esquinas), define su ancho y alto y escoge un color. Una vista previa en vivo se actualiza al instante, y el CSS generado con width: 0; height: 0; border queda listo para copiar directamente en tu hoja de estilos. Sin imágenes, sin SVG y sin dependencias.
¿Qué es un generador de triángulos CSS?
Un triángulo CSS es una forma dibujada con los bordes de un elemento en lugar de una imagen. Al definir un elemento con width: 0 y height: 0 y darle bordes gruesos, las esquinas donde se encuentran los bordes forman aristas diagonales. Deja tres bordes transparentes y uno con color sólido y te queda un único triángulo. Este generador convierte tus elecciones de dirección, tamaño y color en ese CSS de bordes, así que no tienes que averiguar qué bordes colorear y cuáles dejar transparentes.
Cómo hacer un triángulo CSS
Crear un triángulo toma solo unos pocos pasos:
- Elige la dirección hacia la que debe apuntar el triángulo: arriba, abajo, izquierda, derecha o una esquina.
- Define el ancho y el alto en píxeles para controlar las proporciones del triángulo.
- Escoge un color con el selector o escribiendo un valor hexadecimal.
- Revisa la vista previa en vivo para confirmar que la forma se ve correcta.
- Copia el CSS generado y aplica la clase a un elemento de tu página.
¿Cómo funciona el truco del triángulo con bordes en CSS?
Cuando un elemento no tiene ancho ni alto, sus cuatro bordes se encuentran en el punto central, y cada borde se renderiza como un trapecio que se afina hasta convertirse en un triángulo en sus esquinas. Al dejar transparentes los dos bordes vecinos a la dirección del triángulo y colorear el borde opuesto, solo permanece visible una cuña triangular. En un triángulo hacia arriba, por ejemplo, los bordes izquierdo y derecho son transparentes y el borde inferior está coloreado, de modo que la forma coloreada apunta hacia arriba.
¿Cómo cambio el tamaño y la dirección del triángulo?
El ancho controla la base del triángulo en los triángulos hacia arriba y hacia abajo y la profundidad en los triángulos hacia la izquierda y la derecha, mientras que el alto hace lo contrario. Para invertir la dirección, el generador cambia qué borde lleva el color y cuáles dos quedan transparentes. Las direcciones de esquina usan solo dos bordes (uno coloreado y uno transparente) para producir un triángulo rectángulo anclado a esa esquina.
¿Por qué usar este generador de triángulos CSS?
- 100 % gratis, sin anuncios, registro ni límites.
- Vista previa en vivo actualizada al instante al cambiar dirección, tamaño o color.
- Genera CSS limpio y estándar que copias con un clic.
- Admite las direcciones arriba, abajo, izquierda, derecha y las cuatro esquinas.
- CSS puro: sin imágenes, SVG ni dependencias externas.
- Funciona por completo en tu navegador, así que no se sube nada.
Preguntas frecuentes
¿El generador de triángulos CSS es gratis?
Sí. Todas las herramientas de ToolsSoup son completamente gratuitas, sin cuenta, registro ni límites ocultos.
¿El CSS generado funciona en todos los navegadores?
Sí. La técnica del triángulo con bordes depende solo de bordes estándar, así que el CSS que produce esta herramienta funciona en todos los navegadores modernos, incluidos Chrome, Firefox, Safari y Edge.
¿Por qué el triángulo se hace con bordes en lugar de una imagen?
Los triángulos con bordes son diminutos, escalan con nitidez a cualquier resolución y no requieren ninguna petición extra. Son ideales para flechas de menús desplegables, tooltips, cintas y colas de globos de diálogo, donde cargar una imagen sería un desperdicio.
¿Mis datos se suben a algún lugar?
No. El generador funciona por completo en tu navegador, así que nada de lo que configuras se envía ni se almacena en ningún servidor.