Generador de Triángulo CSS

Elige una dirección, tamaño y color para construir un triángulo con CSS puro, luego copia el código. Se usa la clásica técnica del div de ancho y alto cero con bordes transparentes — sin archivos de imagen, sin SVG, sin clip-path — solo un puñado de declaraciones border que cualquier navegador entiende.

¿Qué es esta herramienta?

CSS no tiene una forma de triángulo dedicada, así que los triángulos se construyen con un truco muy conocido: toma un elemento con ancho y alto cero, dale un borde sólido en un lado y bordes transparentes en los otros dos lados adyacentes. Como los bordes adyacentes se encuentran en un ángulo de 45 grados, los bordes transparentes se estrechan hasta un punto, dejando visible solo el borde con color, con forma de triángulo.

Esta herramienta construye esa estructura por ti: elige hacia qué dirección debe apuntar el triángulo, qué tan grande debe ser y de qué color, y observa cómo se actualiza la vista previa en vivo mientras copias el CSS exacto. Es el mismo truco usado en toda la web para flechas solo-CSS, punteros de tooltips y flechas de menús desplegables.

Fuente: CSS Backgrounds and Borders Module Level 3, W3C — define cómo se encuentran en ángulo los bordes adyacentes, que es el mecanismo del que depende esta técnica de triángulos.

¿Por qué utilizarlo?

La vista previa en vivo renderiza el triángulo real para que confirmes tamaño, dirección y color antes de copiar nada.
Cubre las cuatro direcciones básicas — arriba, abajo, izquierda, derecha — con un solo control.
No necesita archivos de imagen ni SVG — un triángulo hecho así son solo unas líneas de CSS.
Útil para punteros de tooltips, flechas de menús desplegables/acordeones, viñetas personalizadas y formas decorativas sencillas.
Se ejecuta enteramente en tu navegador — nada de lo que configuras se sube a ningún sitio.
Gratis, sin registro, funciona en móvil.

Cómo utilizarlo

Elige una dirección — el triángulo apunta hacia arriba, abajo, izquierda o derecha según qué lado reciba el borde sólido.
Define el tamaño — controla el valor de border-width en los tres lados y determina cuán grande se ve el triángulo.
Elige un color para el borde visible (sólido), que se convierte en el color de relleno del triángulo.
Copia el CSS generado y aplícalo a un elemento con width: 0 y height: 0 — un <div> vacío o un pseudo-elemento como ::before/::after funcionan bien.

Ejemplo

Entrada

Dirección: abajo · Tamaño: 60px · Color: #ea580c

Resultado

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea580c;

Para un triángulo que apunta hacia abajo, el color sólido va en border-top mientras que los bordes izquierdo y derecho permanecen transparentes — el lado opuesto a la dirección hacia donde apunta el triángulo.

Por qué importa el ancho y alto cero

El truco solo funciona porque el elemento no tiene caja de contenido propia — width: 0 y height: 0 significan que toda la forma visible proviene puramente de los bordes que se encuentran en el punto central. Si el elemento tiene algún ancho o alto, los bordes ya no se estrechan hasta un punto limpio y la forma se rompe. Por eso la técnica funciona igual de bien en un <div> vacío o en un pseudo-elemento ::before/::after con content: "" — no se necesita contenido real, solo la caja del borde.

La documentación de MDN sobre la propiedad CSS border explica cómo se combinan border-width, border-style y border-color, incluyendo cómo los bordes de lados adyacentes se encuentran en diagonal (developer.mozilla.org/en-US/docs/Web/CSS/border) — el hecho geométrico sobre el que se construye toda esta técnica.

Usos comunes de los triángulos CSS

Punteros de tooltips y globos de diálogo: un pequeño triángulo (6–10px) colocado en el borde de una caja redondeada, con el color de fondo de la caja.
Flechas de menús desplegables y select: un pequeño triángulo hacia abajo junto a un botón o elemento select para indicar que abre un menú.
Indicadores de acordeón/expansión: un triángulo apuntando a la derecha que rota para apuntar hacia abajo cuando una sección se expande.
Viñetas de lista personalizadas: un pequeño triángulo apuntando a la derecha en lugar de la viñeta predeterminada del navegador, para un estilo de lista más distintivo.
Esquinas de banner/cinta simples: un triángulo encajado en la esquina de una tarjeta para simular un efecto de cinta plegada.

Combínalo con otras herramientas CSS

Los triángulos usados como punteros de tooltips normalmente necesitan una sombra a juego para encajar visualmente con la caja a la que están unidos — el Generador de Box Shadow produce esa sombra. Para formas de interfaz más allá de triángulos (chevrones, estrellas, hexágonos), clip-path suele ser el mejor enfoque moderno en lugar de apilar más trucos de bordes.

→ Generador de Box Shadow · Generador de Border Radius

Preguntas frecuentes

¿Por qué el color va en el borde opuesto a la dirección hacia donde apunta el triángulo?

Imagina el elemento como un diamante formado por cuatro segmentos triangulares de borde que se encuentran en el centro. Si el color sólido está en el borde superior, la forma visible ocupa la mitad superior — pero como el elemento tiene tamaño cero, ese triángulo de 'mitad superior' en realidad apunta hacia abajo, hacia donde habría estado la inexistente caja de contenido del elemento. La misma lógica aplica a las cuatro direcciones.

¿Puedo hacer un triángulo que no sea perfectamente isósceles?

Sí — esta herramienta siempre genera un triángulo simétrico por simplicidad, pero puedes editar el CSS copiado a mano después. Hacer desiguales los dos border-width transparentes inclina el triángulo hacia un lado; cambiar el ancho del borde sólido de forma independiente cambia su altura sin afectar el ancho de la base.

¿Esta técnica funciona en todos los navegadores?

Sí — el truco del triángulo basado en bordes depende únicamente del soporte básico de border-width, border-style y border-color, que existe desde las primeras implementaciones de CSS. Es una de las técnicas de formas en CSS puro más ampliamente compatibles disponibles.

¿Cuándo debería usar clip-path en lugar del truco de los bordes?

El truco de los bordes es ideal específicamente para triángulos simples, ya que no necesita propiedades adicionales y funciona en todas partes. Para algo más complejo — pentágonos, estrellas, flechas con una muesca, o recortes diagonales en una caja que aún necesita mostrar una imagen de fondo — clip-path es más flexible y más fácil de razonar, aunque tiene un soporte más limitado en navegadores antiguos.

¿Puedo poner texto o un ícono dentro del triángulo?

No directamente — como el elemento del triángulo tiene ancho y alto cero, no hay caja de contenido para alojar nada. Para combinar un triángulo con texto o un ícono, úsalo como un pseudo-elemento decorativo (::before/::after) en un elemento padre que lo posicione de forma absoluta, y luego estiliza el contenido real del padre por separado.