¿Por qué el truco del border produce un triángulo?

Cuando un elemento de bloque tiene ancho y alto cero, sus bordes no tienen a dónde extenderse excepto hacia adentro. El algoritmo de renderizado CSS dibuja cada borde como un trapecio que se encuentra con sus vecinos en diagonales de 45 grados. Con una caja de tamaño cero, esos trapecios colapsan en triángulos puros que se encuentran en el centro. Al hacer tres de ellos transparentes y uno sólido, aíslas un único triángulo. Es un efecto secundario de cómo los bordes se renderizan en el caso límite — no es una característica diseñada, sino confiable en todos los navegadores desde los años 90.

¿Sigue siendo recomendable el truco del border en 2026?

Para elementos de UI triangulares como carets de desplegables, flechas de tooltip e indicadores direccionales pequeños — sí. Es ligero (sin DOM extra, sin parseo de SVG), tiene soporte universal y hereda color a través de currentColor. Para cualquier cosa más compleja que un triángulo (formas personalizadas, curvas, rutas multisegmento), usa clip-path o SVG. El truco del border no está obsoleto; simplemente tiene un alcance estrecho.

¿Puedo crear un triángulo con esquinas redondeadas?

No con el truco del border — solo produce esquinas afiladas. Para triángulos redondeados, usa SVG con un path que tenga uniones de líneas redondeadas, o clip-path con un polígono y un tratamiento de border-radius separado. Algunas técnicas CSS avanzadas usan bordes apilados o pseudo-elementos para falsificar el redondeo, pero son frágiles y se rompen en diferentes tamaños. SVG es la opción práctica.

¿Cómo roto un triángulo a un ángulo no estándar?

Usa CSS transform: rotate() en el elemento triángulo. El truco del border te da 8 direcciones cardinales; para cualquier cosa intermedia (digamos, una flecha de 30 grados), rota el resultado. Por ejemplo: un triángulo 'derecha' rotado 30 grados se convierte en una flecha que apunta hacia arriba-derecha en 30 grados. El enfoque transform es más simple que recalcular anchos de borde para sesgar el triángulo a una forma no isósceles.

¿Hay diferencia de rendimiento entre triángulos de border, clip-path y SVG?

Marginalmente sí, pero rara vez significativa. Los triángulos de border son los más baratos porque son solo bordes en un div vacío — sin pintado más allá del borde mismo. Clip-path requiere que el navegador calcule una máscara, lo que es ligeramente más caro en el primer pintado pero insignificante después. SVG agrega un nodo separado al árbol de renderizado. Para una flecha de tooltip, la diferencia es inmedible. Para miles de triángulos en una lista (como estrellas de calificación), usa sprites SVG — la sobrecarga por elemento de SVG inline domina a escala.

Triángulos CSS puros en 2026 — Cuándo el truco del border sigue ganando (y cuándo no)

Tengo una broma recurrente de que puedes datar la carrera de un desarrollador frontend por lo que usa cuando necesita dibujar un triángulo. Si va directo a un elemento <svg>, probablemente aprendió CSS después de 2018. Si usa clip-path: polygon(...), llegó alrededor de 2015-2018. Si instintivamente usa un <div> con declaraciones de border extrañas, lleva mucho tiempo haciendo esto.

La versión de "declaraciones de border extrañas" — el truco del border de triángulo CSS — es la más antigua de las tres y sigue siendo mi opción por defecto para elementos pequeños de UI. Esta guía explica por qué funciona, cuándo es la respuesta correcta, cuándo no, y cómo usar el Generador de Triángulos CSS en ToolBox Hubs para saltarte las matemáticas.

El truco, brevemente

Toma un div con ancho y alto cero. Dale bordes. Los bordes no tienen a dónde extenderse, así que colapsan al centro, con cada borde convirtiéndose en un triángulo que se encuentra con los demás en diagonales de 45 grados.

.demo {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 50px solid blue;
  border-bottom: 50px solid green;
  border-left: 50px solid yellow;
}

Obtienes un cuadrado dividido en cuatro triángulos coloreados que se encuentran en el medio. Ahora haz tres de esos bordes transparentes:

.triangle-down {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 50px solid transparent;
  border-bottom: 0;
  border-left: 50px solid transparent;
}

Te queda un único triángulo rojo apuntando hacia abajo. Ese es el truco. Ha estado en CSS desde que la especificación definió cómo se encuentran los bordes en las esquinas, lo que significa que ha funcionado en todos los navegadores existentes, incluido IE6.

En 2026 hay tres formas razonables de dibujar un triángulo en una UI web:

El truco del border — width: 0; border: ...
clip-path — clip-path: polygon(...) en un elemento coloreado
SVG — <svg><polygon points="..." /></svg>

Para elementos pequeños direccionales de UI (carets de desplegables, flechas de tooltip, separadores de breadcrumbs, chevrons de acordeón), el truco del border suele ser el mejor porque:

Sin nodos DOM extra. Es solo un div o pseudo-elemento estilizado. SVG agrega un nodo separado al árbol de renderizado, más su elemento <polygon> interno. Para un tooltip con flecha, eso es 1 nodo extra vs. 2-3.

Hereda currentColor por defecto con un pequeño ajuste. Establece el color del borde a currentColor y el triángulo adopta el color del texto del padre. Útil para transición entre modos oscuro/claro sin reescribir reglas CSS.

Sin preocupaciones de namespace SVG. No necesitas xmlns, no necesitas pensar en viewBox, no tienes que preocuparte por si el SVG es inline o referenciado por sprite.

Renderiza nítido en cualquier nivel de zoom. El truco del border usa renderizado subpíxel del motor CSS del navegador, que es la ruta de renderizado más agresivamente optimizada. SVG a veces puede mostrar artefactos de antialiasing en escalas de 1px, especialmente en navegadores antiguos.

Para triángulos que SON botones o tienen efectos hover, el soporte de estilo y transición es idéntico a cualquier otro elemento — :hover { border-bottom-color: blue } simplemente funciona.

Cuándo deberías recurrir a clip-path o SVG en su lugar

Siendo honesto sobre los límites:

Cualquier cosa que no sea un triángulo básico. Estrellas, pentágonos, flechas con formas complejas, cualquier cosa con curvas. El truco del border es solo para triángulos por necesidad matemática. Recurre a clip-path con polygon() o SVG.

Triángulos que necesitan escalar con el texto. El truco del border usa valores en píxeles. Si quieres un triángulo que escale con el tamaño de fuente del padre, puedes usar unidades em o rem como anchos de borde — pero es incómodo. SVG con viewBox maneja el escalado de forma más natural.

Triángulos con esquinas redondeadas. No hay forma de redondear esquinas con el truco del border. Path SVG con stroke-linejoin="round" o clip-path con border-radius separado es el camino a seguir.

Triángulos que necesitan un trazo (contorno) diferente al relleno. Los bordes no pueden tener su propio borde. SVG tiene fill y stroke como propiedades separadas — perfecto para flechas con contorno.

Triángulos que cambian de forma (animan entre formas). SVG puede transformar suavemente entre paths. clip-path puede interpolar entre puntos de polígono. Los triángulos basados en border no pueden cambiar de forma — solo tamaño y color.

Para el 80% de los triángulos de UI, ninguna de esas condiciones aplica. Los casos simples se mantienen simples.

Las matemáticas (o: Por qué quieres un generador)

El problema con el truco del border: averiguar las declaraciones de border correctas para la dirección que quieres es molesto.

Para un triángulo que apunta hacia arriba:

borde superior: 0
borde izquierdo: media anchura transparente
borde derecho: media anchura transparente
borde inferior: altura completa color sólido

Para un triángulo que apunta hacia la izquierda:

borde superior: media altura transparente
borde derecho: anchura completa color sólido
borde inferior: media altura transparente
borde izquierdo: 0

Para un triángulo de esquina (triángulo rectángulo en una esquina):

dos bordes adyacentes color sólido (uno establece el tamaño)
dos bordes opuestos son 0
...espera, eso está mal, déjame buscarlo...

Puedes ver el problema. Cada dirección tiene su propia disposición de qué bordes son coloreados, cuáles transparentes y cuáles cero. Las matemáticas son hacedoras pero suficientemente molestas que reescribo el mismo CSS de triángulo tres veces antes de que esté bien.

Este es el punto fuerte del Generador de Triángulos CSS. Elige una dirección, establece ancho y alto, elige un color, copia el CSS. El generador hace la aritmética del borde para que tú no tengas que hacerlo.

Ocho direcciones que cubren la mayoría de casos de uso

Las cuatro direcciones cardinales (arriba, abajo, izquierda, derecha) producen triángulos isósceles centrados en el elemento. Estos son los que quieres para indicadores centrados: flechas desplegables debajo de un botón, punteros de tooltip, chevrons de expandir/colapsar.

Las cuatro direcciones de esquina (arriba-izquierda, arriba-derecha, abajo-izquierda, abajo-derecha) producen triángulos rectángulos anclados a una esquina. Estos son los que quieres para cintas de esquina, efectos de papel doblado, acentos de insignia y separadores de breadcrumbs estilo chevron.

/* Flecha que apunta a la derecha (caret de desplegable) */
.caret-right {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid currentColor;
}

/* Cinta de esquina (arriba-derecha) — triángulo sólido en esquina superior derecha */
.ribbon {
  width: 0;
  height: 0;
  border-top: 60px solid #6366f1;
  border-left: 60px solid transparent;
}

El generador cubre las ocho en una UI unificada para que no tengas que recordar qué configuración de borde produce qué dirección.

Patrones prácticos

Algunos snippets del mundo real que muestran el truco del border en acción.

Un tooltip con una flecha apuntando al elemento disparador. La flecha es un pseudo-elemento del tooltip:

.tooltip {
  position: relative;
  background: #1f2937;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid #1f2937;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

El color del border-top coincide con el fondo del tooltip, así que la flecha parece ser parte de la misma forma. Este es el caso de uso canónico.

El clásico separador ">" entre elementos de breadcrumb, pero como flecha dibujada en CSS:

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  margin-right: 12px;
}

.breadcrumb-item::after {
  content: '';
  display: inline-block;
  margin-left: 12px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid #9ca3af;
}

.breadcrumb-item:last-child::after {
  display: none;
}

Podrías usar un carácter Unicode ›, pero el enfoque CSS te da control preciso de tamaño y coincide exactamente con los colores de tu sistema de diseño.

Cola de bocadillo

La cola en una burbuja de mensaje de chat:

.bubble {
  position: relative;
  background: #6366f1;
  color: white;
  padding: 12px 16px;
  border-radius: 12px;
  max-width: 280px;
}

.bubble::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -8px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #6366f1;
  border-left: 8px solid transparent;
}

La forma de triángulo de esquina "abajo-derecha", anclada a la parte inferior izquierda de la burbuja, da ese clásico aspecto de cola de bocadillo sin un SVG.

Errores comunes

Cosas que me han roto triángulos:

Olvidar width: 0; height: 0;. Sin estos, los bordes dibujan alrededor de una caja real en lugar de colapsar a un punto. Obtienes un marco en vez de un triángulo.

Configurar solo border-color y olvidar border-width. Un borde con ancho cero no se dibuja, sin importar el color. Los cuatro bordes necesitan anchos explícitos incluso si algunos son cero.

Confundir border-top con la parte superior del triángulo. El triángulo apunta LEJOS del borde coloreado. Un border-bottom sólido produce un triángulo apuntando HACIA ARRIBA. Si quieres que el triángulo apunte HACIA ABAJO, usa un border-top sólido. Esto confunde a todos al principio.

Dimensionar el triángulo con width en lugar de anchos de borde. Establecer width: 100px; height: 50px no hace nada útil — el elemento aún necesita ser de tamaño cero para el truco del border. El 'tamaño' del triángulo se controla completamente por los anchos de borde.

Transiciones hover en color pero no en border-color. transition: background-color 200ms no animará un triángulo de border. Usa transition: border-color 200ms (o transition: all) para que el cambio de color se anime.

Una nota sobre currentColor

currentColor es una palabra clave CSS que se resuelve al valor de la propiedad color del elemento. Es increíblemente útil para triángulos que necesitan coincidir con el color de texto del padre:

.icon-only-button {
  color: #6366f1;
}

.icon-only-button::after {
  /* Este triángulo hereda el color del botón */
  border-left: 8px solid currentColor;
}

.icon-only-button:hover {
  color: #4f46e5;
  /* El triángulo se actualiza automáticamente al nuevo color */
}

Este patrón es lo que hace que los triángulos de border funcionen bien con sistemas de temas y modo oscuro. Establece el color una vez en el padre, y cada triángulo lo hereda. No necesitas reglas CSS separadas para modo oscuro para cada dirección de triángulo.

Herramientas que combinan bien

Los triángulos suelen ser una pieza de un rompecabezas de UI más grande. Estas herramientas aparecen frecuentemente en el mismo flujo de trabajo:

Generador de Clip Path CSS — para formas más complejas que triángulos (estrellas, pentágonos, flechas)
Generador de Gradientes CSS — para rellenar fondos detrás de tus triángulos
Generador de Border Radius CSS — para formas redondeadas que complementan los triángulos afilados
Selector de Color — para afinar el color exacto del triángulo desde una paleta de marca

El Generador de Triángulos CSS es gratis, se ejecuta completamente en tu navegador y produce CSS limpio que puedes pegar en cualquier hoja de estilos — sin dependencias de framework, sin preprocesamiento, sin paso de build requerido. Elige una dirección, arrastra los sliders de tamaño, copia el código.

Por qué sigo usando esto en 2026

Las tendencias de frontend se mueven rápido. Los frameworks vienen y van. CSS mismo ha agregado container queries, :has(), estilos en capas, view transitions — características importantes que cambian cómo escribimos interfaces modernas.

Pero el truco del border sigue siendo la respuesta correcta para "necesito un triángulo pequeño como parte de un elemento de UI." Es pequeño, rápido, bien entendido y funciona en todas partes. Que sea viejo no es un problema — es una señal de que resolvió su problema completamente la primera vez. Algunas técnicas no necesitan ser reemplazadas.

Recurre a SVG cuando necesites flexibilidad. Recurre a clip-path cuando necesites formas no triangulares. Pero para los triángulos que aparecen en tooltips y desplegables y breadcrumbs — los triángulos UI más comunes — el truco del border sigue siendo la opción más limpia.