¿Por qué funciona el truco de border?

Un elemento de ancho 0 con bordes gruesos se dibuja como 4 triángulos que se tocan en un punto. Haz 3 transparentes y 1 con color — solo se ve ese.

¿Border vs clip-path?

Border es más viejo (funciona en IE6) y tiene mini diferencias de antialiasing. clip-path es más limpio y combina mejor con fondos/imágenes — preferible para código nuevo.

Para ángulos no estándar, usa clip-path y ajusta los puntos del polygon. Las 8 direcciones cubren flechas, tooltips, breadcrumbs.

Border-triangle es universal. clip-path funciona en todos los navegadores desde 2016 — seguro en 2026.

Generador de Triángulos CSS

Color

El truco clásico de triángulo CSS: un elemento de tamaño cero con bordes coloreados gruesos se convierte en un triángulo apuntando al lado opuesto al coloreado. La herramienta te da 8 direcciones (arriba/abajo/izq/der + 4 triángulos de esquina), slider de tamaño y selector de color. Activa 'clip-path' para la alternativa moderna — misma forma, sin bordes, más fácil de dimensionar con width/height.

—

Dirección

Tamaño: 80pxColor

Usar clip-path en su lugar

Vista previa

CSS

.triangle {
  width: 0;
  height: 0;
  border-bottom: 80px solid #5b8def;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
}

Los triángulos por border usan un elemento de tamaño cero con bordes coloreados gruesos — los lados transparentes se cancelan, dejando visible solo el triángulo coloreado.

Cómo usar

Elige dirección (▲▼◀▶ o las 4 esquinas).
Define tamaño y color.
Opcionalmente activa clip-path para algo más limpio.
Copia el CSS a tu proyecto.

Preguntas frecuentes

¿Por qué funciona el truco de border?: Un elemento de ancho 0 con bordes gruesos se dibuja como 4 triángulos que se tocan en un punto. Haz 3 transparentes y 1 con color — solo se ve ese.
¿Border vs clip-path?: Border es más viejo (funciona en IE6) y tiene mini diferencias de antialiasing. clip-path es más limpio y combina mejor con fondos/imágenes — preferible para código nuevo.
¿Puedo rotar?: Para ángulos no estándar, usa clip-path y ajusta los puntos del polygon. Las 8 direcciones cubren flechas, tooltips, breadcrumbs.
¿Soporte?: Border-triangle es universal. clip-path funciona en todos los navegadores desde 2016 — seguro en 2026.