Generador de Triángulos CSS
Crea triángulos CSS con la técnica del border.
Elige dirección, tamaño y color — copia el código al instante.
Acerca de
El Generador de Triángulos CSS crea triángulos usando el clásico truco del border — sin imágenes. Compatible con las 8 direcciones (arriba, abajo, izquierda, derecha y 4 diagonales).
Perfecto para bocadillos de chat, flechas en menús desplegables, chevrons de navegación y cualquier decoración UI. El código generado se puede pegar directamente en tu proyecto. Todo se procesa localmente en tu navegador.
Cómo Usar
Elige la dirección
Selecciona una de las 8 posiciones del grid 3×3 para apuntar el triángulo.
Ajusta los parámetros
Usa los sliders de ancho y alto, y el selector de color para personalizar el triángulo. La vista previa se actualiza en tiempo real.
Copia el código
Haz clic en "Copiar CSS" o "Copiar HTML" para llevar el código al portapapeles y pegarlo en tu proyecto.
Glosario
- Truco del border
- Técnica CSS para crear triángulos definiendo width y height en 0, luego aplicando bordes de colores y transparentes.
- transparent
- Valor de color CSS que significa completamente transparente. Se usa para ocultar los lados no deseados del borde.
- clip-path
- Propiedad CSS que recorta elementos con formas personalizadas. Alternativa al truco del border con mayor flexibilidad pero mayor complejidad.
- Bocadillo (Speech Bubble)
- Elemento UI en forma de globo para chats o tooltips. El triángulo forma la "cola" que apunta al emisor.
- Pseudo-elemento (::before/::after)
- Elementos virtuales de CSS usados para añadir el triángulo a una caja sin HTML adicional.
FAQ
- Q.¿Truco del border vs. clip-path, cuál usar?
- El truco del border funciona en IE11 y todos los navegadores modernos. clip-path admite formas más complejas pero con menor soporte en navegadores antiguos.
- Q.¿Puedo crear un triángulo equilátero?
- Puedes aproximarlo ajustando la proporción ancho-alto. Para un triángulo hacia arriba, intenta ancho ≈ alto × 2.
- Q.¿Se envían datos a algún servidor?
- No. Todo se genera localmente en tu navegador.
- Q.¿Puedo hacer un triángulo responsivo?
- Sí. Reemplaza los valores px generados por unidades em, rem o vw manualmente.
Casos de Uso
Bocadillos de Chat
Añade una cola triangular a los globos de mensajes en UIs de chat o notificaciones.
Flechas de Acordeón y Menú
Usa triángulos arriba/abajo para indicar el estado abierto/cerrado de menús.
Flechas en Selectores Personalizados
Reemplaza las flechas predeterminadas de los select con triángulos CSS estilizados.
Navegación de Carrusel
Crea botones de flecha izquierda/derecha para sliders sin usar fuentes de iconos.