Generador de Triángulos CSS

Crea triángulos CSS puros usando la técnica del border hack. Elige dirección, tamaño y color con vista previa y CSS listo para copiar.

CSS Triangle Generator

Create pure CSS triangles using the border hack.

Width100px

Height100px

Color

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 100px 50px;
  border-color: transparent transparent #10b981 transparent;
}

Cómo usar el Generador de Triángulos CSS

Elige la dirección del triángulo: arriba, abajo, izquierda o derecha.
Ajusta los controles de ancho y alto para dimensionar el triángulo.
Elige un color usando el selector de color.
Copia el CSS generado y pégalo en tu hoja de estilos.

Acerca de los Triángulos CSS

Los triángulos CSS se crean con un truco: establecer ancho y alto a cero con bordes gruesos transparentes, luego colorear un borde para crear una forma triangular.

Esta técnica se usa para flechas de tooltips, indicadores de dropdown y elementos decorativos — todo sin imágenes ni SVGs.

Preguntas frecuentes

¿Cómo funciona el truco del triángulo CSS? ▼

Con ancho y alto en 0 y bordes gruesos, los bordes forman cuatro triángulos. Tres transparentes revelan un triángulo visible.

¿Puedo crear diferentes formas? ▼

Este generador crea triángulos. Para otras formas, usa border-radius o clip-path.

¿Funciona en todos los navegadores? ▼

Sí. La técnica de bordes es una de las más antiguas y compatibles de CSS.