Generador de triángulos CSS

El truco del borde, un hack CSS de 25 años que sigue funcionando

La técnica del triángulo CSS aprovecha cómo el algoritmo de pintado de bordes CSS gestiona los bordes adyacentes. Cuando dos bordes se encuentran en una esquina, el límite entre ellos se traza como una línea diagonal en el ángulo que biseca la esquina. Con un elemento de tamaño normal, la esquina es pequeña y la diagonal apenas se ve. Pero si pones el ancho y la altura del elemento a cero y le das bordes gruesos, las esquinas se apoderan de todo el espacio visual, y lo que era una diagonal invisible se convierte en el borde visible de un triángulo. Haz transparentes tres de los cuatro bordes, deja el cuarto coloreado, y has dibujado un único triángulo apuntando hacia el lado opuesto al color. La técnica fue ampliamente documentada hacia 2007–2008 en los primeros artículos de CSS-tricks por Chris Coyier y otros; desde entonces ha sido un básico de la caja de herramientas del diseñador web porque produce una forma nítida, escalable y coloreable en hex, sin SVG, sin PNG, sin petición HTTP extra y sin CSS complicada. La matemática es simple pero contraintuitiva (la altura del triángulo es el ancho de borde del lado coloreado; su base es el doble del ancho de borde del lado transparente adyacente). Este generador hace los cálculos para que arrastres deslizadores en lugar de calcular anchos de borde.

Alternativas modernas, clip-path, SVG, conic-gradient

En 2026, el triángulo por bordes tiene competencia. CSS clip-path con la función polygon() (CSS Masking Module Level 1, soporte baseline desde 2017) te deja recortar cualquier elemento a un polígono arbitrario: clip-path: polygon(50% 0, 100% 100%, 0 100%) dibuja un triángulo apuntando hacia arriba sobre cualquier elemento. clip-path es más flexible (cualquier número de vértices, no sólo tres; funciona sobre cualquier elemento con contenido, no sólo divs vacíos), compone mejor con transformaciones y animaciones, y soporta esquinas redondeadas vía la función más reciente shape(). SVG en línea (<svg><polygon points="50,0 100,100 0,100"/></svg>) te da el máximo control, trazos, rellenos, degradados, animaciones vía SMIL o CSS, accesibilidad vía elementos <title>. conic-gradient puede producir formas triangulares vía paradas de color colocadas con astucia, aunque es más una curiosidad que un patrón práctico. El triángulo por bordes sigue siendo la opción correcta para el caso decorativo simple (punteros de tooltip, cursos de despleglables, colas de bocadillos) donde la simplicidad y el cero overhead pesan más que la flexibilidad; clip-path es mejor cuando el triángulo es parte de una forma más compleja, cuando hay que poner texto dentro, o cuando el diseño puede necesitar esquinas redondeadas.

Dónde los triángulos CSS aportan valor

• Punteros de tooltip y popover. El pequeño triángulo que conecta una burbuja tooltip con su elemento ancla es el caso de uso más común, puedes construirlo como un pseudoelemento triángulo CSS (::before o ::after) sobre el tooltip, posicionado en el borde que mira hacia el ancla.
• Colas de bocadillos. La cola puntiaguda en burbujas de mensaje de chat, tarjetas de comentario y citas resaltadas. Misma técnica que los punteros de tooltip, simplemente más grande y con estilo para coincidir con el color de fondo de la burbuja.
• Indicadores de cursor en desplegables. El pequeño triángulo hacia abajo en selects y botones de menús desplegables. Los elementos <select> nativos tienen cursores con estilo del SO; los desplegables personalizados construidos con <button> + popover necesitan el suyo.
• Indicadores de expandir/colapsar de acordeón. El triángulo que cambia entre apuntar a la derecha (colapsado) y apuntar hacia abajo (expandido) cuando haces clic en una sección de acordeón. Animado con una transformación rotate de CSS.
• Separadores de migas de pan. El triángulo apuntando a la derecha entre enlaces de migas de pan. A menudo construido como un triángulo CSS con ::before.
• Decoraciones de banners y cintas. La muesca triangular al final de un banner o etiqueta de oferta, el doblez de esquina en una insignia «nuevo», el chevron al fondo de una sección hero apuntando hacia abajo para hacer scroll. Todos triángulos de un solo color, todos con el truco del borde.
• Separadores decorativos. Una fila de pequeños triángulos como separadores de sección, superposiciones de patrones geométricos, florituras de estilo retro.

Consideraciones de accesibilidad

Los triángulos CSS son decoración puramente visual, no tienen significado semántico ni presencia en el árbol de accesibilidad. Los lectores de pantalla no los anuncian. Para uso puramente decorativo (la cola del bocadillo, el separador de migas de pan) este es el comportamiento correcto. Para triángulos que transmiten significado (una flecha apuntando a la sección activa, un cursor de menú indicando «clic para más»), el significado debe comunicarse por otros medios: un atributo aria-expanded en un disparador de desplegable, una etiqueta de texto visible, un aria-label en el botón. No te apoyes en un triángulo CSS para comunicar estado; trátalo como un refuerzo visual de un estado comunicado semánticamente por otros atributos. El contenido de los pseudoelementos CSS ::before y ::after generalmente no lo leen los lectores de pantalla, lo cual es apropiado para formas decorativas.

Tipos de triángulos que produce este generador

• Arriba / Abajo: triángulos isósceles apuntando arriba o abajo, la forma más común para tooltips e indicadores de acordeón.
• Izquierda / Derecha: apuntando a izquierda o derecha, usados para migas de pan y avisos de columna lateral.
• Esquinas superior-izquierda / superior-derecha: triángulos rectángulos que encajan en la esquina de un elemento contenedor. Usados para efectos de pliegue de cinta y de insignia de esquina.
• Esquinas inferior-izquierda / inferior-derecha: triángulos rectángulos para las esquinas opuestas.
• Aspecto personalizado: relación ancho-alto ajustable para formas no equiláteras, útil cuando se quiere un puntero alto y estrecho o un chevron ancho y plano.

Herramientas relacionadas