Generador de triángulos CSS
Herramienta de generador de triángulos CSS
Qué es el 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.
Cómo usar
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.
Cómo funcionan los triángulos CSS (el truco del borde)
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.
Personalizar dirección y tamaño 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.
Uso de triángulos en diseño web
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.
▶¿Cómo funcionan los triángulos CSS sin imágenes?
▶¿Puedo crear triángulos apuntando en cualquier dirección?
▶¿Cómo añado un borde o contorno a un triángulo CSS?
▶¿Son mejores los triángulos CSS que los SVG?
▶¿Puedo animar los triángulos CSS?
▶¿Cómo uso triángulos para flechas de tooltips?
▶¿Los triángulos CSS funcionan en todos los navegadores?
Si este herramienta le ha sido útil, considere comprarme un café.
Compra un café para mí.