Generador de triángulos CSS Genera triángulos CSS utilizando la técnica del borde con controles de dirección y color.
Generador de triángulos CSS
Genera triángulos CSS utilizando la técnica del borde con controles de dirección y color.
Elige la dirección
Selecciona hacia dónde debe apuntar el triángulo: arriba, abajo, izquierda o derecha.
Personaliza tamaño y color
Ajusta el tamaño del triángulo y selecciona tu color deseado.
Copia el CSS
Previsualiza el triángulo y copia el código CSS basado en bordes.
What Is Generador de triángulos CSS?
El Generador de Triángulos CSS crea triángulos utilizando la técnica del borde CSS, una de las trucos más ingeniosos en CSS. Al establecer el ancho y alto de un elemento a cero y utilizar bordes transparentes en tres lados con un borde coloreado en uno de los lados, se forma una figura triangular. Esta herramienta te permite elegir la dirección del triángulo (hacia arriba, hacia abajo, izquierda, derecha), ajustar su tamaño y seleccionar cualquier color. El CSS generado es ligero y no requiere imágenes ni SVG. Los triángulos CSS se utilizan comúnmente para flechas de tooltips, indicadores de menús desplegables, separadores de migas de pan y elementos decorativos de diseño. La vista previa muestra el triángulo en tiempo real y el código está listo para copiarlo en tu hoja de estilos.
Why Use Generador de triángulos CSS?
-
No se necesitan imágenes, técnica de borde puro CSS
-
Cuatro opciones de dirección con tamaño personalizable
-
Alternativa ligera y eficiente a las flechas basadas en imágenes
-
Previsualización instantánea y copia de código de un solo clic
Common Use Cases
Flechas de tooltip
Crea el puntero de la flecha para tooltips y popovers CSS.
Indicadores de menú desplegable
Agrega indicadores triangulares a los menús desplegables y selectores.
Separadores de migas de pan
Utiliza triángulos como separadores visuales en la navegación de migas de pan.
Elementos decorativos
Agrega formas geométricas a divisores de sección y acentos de diseño.
Technical Guide
La técnica del triángulo CSS explota cómo se encuentran los bordes en las esquinas de un elemento. Cuando un elemento tiene un ancho y alto cero, los bordes forman figuras triangulares donde se encuentran. Al hacer que tres bordes sean transparentes y uno coloreado, se crea un triángulo que apunta en la dirección opuesta al borde coloreado. Por ejemplo, border-bottom: 50px solid blue con bordes izquierdo y derecho transparentes crea un triángulo que apunta hacia arriba. El tamaño del triángulo está controlado por los valores de ancho del borde. Para triángulos equiláteros, todos los anchos de borde deben ser iguales. Para triángulos isósceles, el borde coloreado puede tener un ancho diferente. Esta técnica también puede crear triángulos rectángulos haciendo que solo uno de los bordes adyacentes sea transparente. Los triángulos CSS se renderizan de manera nítida en cualquier resolución y están soportados en todos los navegadores.
Tips & Best Practices
-
1El triángulo apunta en la dirección opuesta al borde coloreado
-
2Utiliza anchos de borde coincidentes para triángulos equiláteros
-
3Combina con pseudo-elementos ::before o ::after para flechas en línea
-
4Los triángulos CSS se pueden rotar con transform para ángulos personalizados
Related Tools
Generador de tooltips CSS
Genera tooltips de puro CSS con posición, flecha, colores y estilos personalizables.
🎨 CSS & Design
Generador de CSS Clip Path
Crea formas de clip-path de CSS con preestablecidos de polígono, círculo y elipse.
🎨 CSS & Design
Generador de formas de globo CSS
Genera formas de globo orgánicas como SVG con rellenos degradados y aleatorización.
🎨 CSS & Design
Generador de divisores CSS
Genera divisores de sección CSS con múltiples estilos, incluyendo degradado, sombra y zigzag.
🎨 CSS & DesignFrequently Asked Questions
Q ¿Cómo funciona la técnica del triángulo CSS?
Q ¿Puedo crear triángulos que apunten a ángulos personalizados?
Q ¿Son los triángulos CSS responsivos?
Q ¿Puedo crear otras formas con bordes?
Q ¿Hay una alternativa moderna a los triángulos de borde?
About This Tool
Generador de triángulos CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.