Generador de Triángulos CSS
Triángulos y flechas perfectas con el clásico truco de bordes CSS: elige dirección, ajusta medidas y copia.
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 30px solid #7c3aed;
}Hecho por
Miguel Ángel Colorado Marin (MACM)
Hecho por
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
Desarrollo aplicaciones web, herramientas digitales y proyectos completos — desde el diseño hasta el despliegue.
Antes de que existieran clip-path y los SVG inline, la única forma de dibujar un triángulo nítido era un div de cero por cero píxeles con bordes gruesos y transparentes: el famoso «border trick». Sigue siendo la técnica más ligera para flechas de tooltips, bocadillos e indicadores, porque son unos pocos bytes de CSS y se pinta idéntico en cualquier navegador. Este generador construye ese CSS por ti: eliges una de las ocho direcciones (las cuatro cardinales y las diagonales), ajustas base y altura con deslizadores, escoges color y copias el resultado. La vista previa usa una cuadrícula de fondo para que puedas verificar ángulos y tamaños antes de llevarlo a tu proyecto.
Características
- ✓8 direcciones: cardinales y diagonales
- ✓Ancho, alto y color independientes
- ✓Vista previa sobre cuadrícula para medir
- ✓CSS puro sin imágenes ni SVG
- ✓Compatible con todos los navegadores históricos
¿Cómo crear un triángulo en CSS?
- 1
Elige la dirección
Ocho opciones: arriba, abajo, lados y las cuatro diagonales.
- 2
Ajusta base y altura
El ancho controla la base y el alto, la punta del triángulo.
- 3
Escoge el color
Cualquier valor CSS válido; el preview lo aplica al instante.
- 4
Pega el estilo
Aplica la clase .triangle al elemento que deba dibujarlo.
Preguntas frecuentes
¿Por qué width y height valen cero?
El triángulo no es contenido sino el propio borde del elemento: al tener dimensiones nulas, los cuatro bordes se encuentran en el centro y cada uno se dibuja como un trapecio que visualmente forma el triángulo.
¿Prefiero clip-path o este truco?
Para formas simples y máximo soporte, el truco de bordes sigue siendo imbatible y funciona hasta en navegadores antiguos. Si necesitas ángulos arbitrarios o bordes difuminados, clip-path o SVG dan más control.
¿Se genera todo en mi navegador?
Sí, el CSS se compone localmente a partir de tus opciones.
Herramientas relacionadas
Incrusta Generador de Triángulos CSS en tu web
Integra Generador de Triángulos CSS en cualquier página web con un simple iframe. Gratis, con atribución a miguelacm.es.
<iframe
src="https://miguelacm.es/embed/css-triangle-generator"
width="100%"
height="700"
frameborder="0"
title="Generador de Triángulos CSS — miguelacm.es"
></iframe>