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.
Preguntas frecuentes
- Q.¿Truco del border vs. clip-path, cuál usar?
- El truco del border funciona en navegadores antiguos como IE11 y en todos los navegadores modernos. clip-path admite formas más complejas pero puede no ser compatible con navegadores antiguos. Cualquiera es aceptable para proyectos modernos.
- Q.¿Puedo crear un triángulo equilátero?
- Puedes aproximarlo ajustando la proporción de ancho a alto. Para un triángulo hacia arriba, comienza ajustando el ancho ≈ alto × 2.
- Q.¿Se envían datos a algún servidor?
- No. Todo se genera localmente en tu navegador. No se transmite ningún dato.
- Q.¿Puedo hacer un triángulo responsivo?
- Sí. Reemplaza manualmente los valores en px generados por unidades em, rem o vw para que el triángulo se escale de forma responsiva.
- Q.¿Puede generar el CSS de un bocadillo de chat completo?
- Esta herramienta se centra exclusivamente en generar el CSS para la parte del triángulo. Un bocadillo de chat completo se suele implementar combinando el triángulo con los pseudo-elementos ::before/::after.
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.
Enviar comentarios
Déjenos saber su opinión para ayudarnos a mejorar la herramienta.
Los comentarios están temporalmente suspendidos
El servidor está ocupado o la protección contra spam está activa. Inténtelo más tarde.