Generador de triángulos CSS

El Generador de Triángulos CSS es una herramienta interactiva que permite crear triángulos CSS puros sin usar imágenes ni SVG. Aprovecha el truco de bordes CSS para producir triángulos en 8 direcciones (arriba, abajo, izquierda, derecha y cuatro diagonales) con tamaño y color personalizables. El código CSS generado se puede copiar directamente a tu proyecto.

Selecciona una dirección de triángulo entre los botones de dirección (arriba, abajo, izquierda, derecha o diagonal). Ajusta el ancho y la altura usando los controles deslizantes para controlar las dimensiones del triángulo. Elige un color con el selector de color. La vista previa se actualiza en tiempo real y el código CSS generado aparece en la parte inferior. Haz clic en el botón copiar para copiar el CSS al portapapeles.

Los triángulos CSS usan una técnica ingeniosa con bordes. Cuando un elemento tiene ancho y alto cero, sus bordes se encuentran en el punto central. Haciendo algunos bordes transparentes y otros de color, se crea la apariencia de un triángulo. Por ejemplo, un triángulo hacia arriba usa bordes izquierdo y derecho transparentes con un borde inferior de color. Los anchos de borde determinan el tamaño y las proporciones del triángulo.

El generador soporta 8 direcciones: arriba, abajo, izquierda, derecha, arriba-izquierda, arriba-derecha, abajo-izquierda y abajo-derecha. Los triángulos diagonales usan solo dos bordes en lugar de tres, creando un triángulo rectángulo. El ancho controla la base del triángulo y la altura controla lo alto. Para un triángulo isósceles perfecto, establece el ancho y la altura al mismo valor.

Los triángulos CSS se usan comúnmente para flechas de tooltips, punteros de menús desplegables, colas de burbujas de diálogo, separadores de migas de pan y elementos decorativos. Son ligeros, no requieren solicitudes HTTP adicionales y escalan perfectamente en cualquier resolución. Combínalos con transiciones y transformaciones CSS para animaciones suaves.