Softonic

Generador de Triángulos CSS

Paso 1 / 2
Siguiente

El triángulo CSS clásico no es un triángulo en absoluto: es un elemento de ancho cero y altura cero con tres bordes transparentes y un borde de color que se encuentra en un punto. Este generador produce esa declaración para ti en cuatro direcciones (arriba, abajo, izquierda, derecha), dimensionado al valor en píxeles que elijas y relleno con el color que selecciones. Ideal para flechas de tooltip, burbujas de diálogo y separadores de migas de pan.

Cómo construir un triángulo de borde

  1. 1

    Elige una dirección

    Arriba, abajo, izquierda o derecha. La dirección determina qué borde recibe el color y cuáles tres permanecen transparentes.

  2. 2

    Establece el tamaño

    El valor de tamaño se utiliza para todos los anchos de borde. Un triángulo de 60px tendrá 120px de ancho (o alto, dependiendo de la dirección).

  3. 3

    Elige un color de relleno

    La entrada de color solo acepta valores hex (por ejemplo `#10b981`); los colores rgb, rgba o nombrados no están soportados. El color se aplica solo al borde del lado opuesto.

  4. 4

    Copia la regla CSS

    La salida es un conjunto de reglas completo `.triangle { ... }`, colócalo en tu hoja de estilos y añade `<div class="triangle"></div>` donde sea necesario.

Por qué funciona el truco de borde

Cuando una caja tiene width: 0 y height: 0, sus cuatro bordes se encuentran en un único punto central. Debido a que los bordes se unen a 45 grados, cada borde ya es un triángulo: tres de ellos simplemente son invisibles. Haz que un borde sea de color y verás ese triángulo.

Mapa de direcciones

Dirección Borde visible Bordes transparentes
Arriba border-bottom border-left, border-right, border-top
Abajo border-top border-left, border-right, border-bottom
Izquierda border-right border-top, border-bottom, border-left
Derecha border-left border-top, border-bottom, border-right

Matemáticas de tamaño

Los tres bordes transparentes comparten el valor de tamaño. El borde visible utiliza el mismo tamaño. Así que un triángulo con size: 60:

  • Ancho = 2 × 60 = 120px para triángulos arriba/abajo
  • Alto = 2 × 60 = 120px para triángulos izquierda/derecha

Si necesitas un triángulo asimétrico (base más estrecha, punto más alto), da a los bordes transparentes un tamaño y al borde visible un tamaño diferente: por ejemplo, border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid red; da un triángulo alto y estrecho hacia arriba.

Cuándo optar por SVG en su lugar

  • Necesitas múltiples puntos, no tres: usa <polygon>.
  • El triángulo debe escalar fluidamente con el padre: usa un viewBox y preserveAspectRatio.
  • Quieres un relleno de degradado, un trazo o una punta redondeada: los bordes CSS no pueden hacer ninguno de esos.

Preguntas frecuentes

No solo con bordes: los anchos de borde no aceptan % o vw de ninguna manera bien soportada. Si necesitas escalado fluido, cambia a un SVG <polygon> o usa clip-path: polygon(...) en un elemento normal.

No puedes redondear la esquina donde se encuentran los bordes. Usa un SVG con un camino trazado y stroke-linejoin: round, o clip-path: polygon(...) combinado con un ligero filter: drop-shadow para enmascarar el borde.

Sí, ese es el caso de uso más común. Posiciona el triángulo absolutamente contra el borde del tooltip y ajusta el color de relleno al fondo del tooltip para que se lea como una sola burbuja.

Sí. La dirección, el tamaño y el color que elijas se envían a nuestro servidor con la solicitud de la página para que pueda construir el CSS. En el flujo paso a paso también viajan en el enlace de la página. No se almacenan.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Formateador de JSON

Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.

Generador de Paletas de Color

Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.

Herramienta disponible en otros idiomas