Generador de Triángulos y Flechas CSS

Crea un triángulo CSS en tu navegador. Elige una dirección (arriba, derecha, abajo, izquierda), escoge isósceles (el clásico truco del border) o equilátero (un triángulo real con vértice de 60° mediante clip-path), ajusta el tamaño y el color, y copia el resultado como clase CSS o estilo inline. 100% del lado del cliente, sin subir nada.

Dirección

Vista previa

Ancho
— px
Alto
— px
Forma
—
Dirección
—

CSS listo para copiar

Clase CSS 
.css-triangle
Estilo inline 
…
Fragmento HTML completo 
…

Cómo funciona

Un triángulo CSS es el truco en el que se crea un elemento de tamaño cero, se le da un border grueso en cada lado, y luego se hacen transparent tres de esos bordes para que solo quede visible un lado coloreado. La pieza visible resultante es un triángulo nítido y escalable que funciona a cualquier tamaño y se entrega como una sola clase CSS.

El truco del border es isósceles derecho por construcción: el triángulo resultante siempre es una imagen especular a lo largo del eje de simetría, con el ángulo del vértice definido por los cuatro anchos de border. Cambia a equilátero y la página usa un clip-path: polygon() sobre una caja cuadrada en su lugar, dando una forma real con vértice de 60° y los tres lados iguales.