ifBuyz Tools
Diseño

Generador de triángulo CSS

Entrada

Elige la dirección, la base, la altura y el color.

Dirección
Base Width60px
Alto80px

Copia el CSS generado y aplícalo a un elemento vacío.

Salida

.triangle {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 80px solid #6366f1;
}

Preguntas frecuentes

¿Cómo se crea un triángulo con CSS?
Usando bordes en un elemento de tamaño cero para formar la figura.
¿Se puede controlar orientación y tamaño?
Sí, variando lado y grosor de los bordes.
¿Dónde se usa comúnmente?
En flechas de tooltip, menús y elementos de interfaz.