Generatore di Triangoli CSS

Crea triangoli CSS puri con la tecnica del border hack. Scegli direzione, dimensione e colore con anteprima e CSS pronto da copiare.

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;
}

Come usare il Generatore di Triangoli CSS

Scegli la direzione del triangolo: alto, basso, sinistra o destra.
Regola i cursori di larghezza e altezza per dimensionare il triangolo.
Scegli un colore con il selettore colore.
Copia il CSS generato e incollalo nel tuo foglio di stile.

Informazioni sui Triangoli CSS

I triangoli CSS sono creati con un trucco: impostare larghezza e altezza a zero con bordi spessi trasparenti, poi colorare un bordo per creare una forma triangolare.

Questa tecnica è usata per frecce di tooltip, indicatori di dropdown ed elementi decorativi — tutto senza immagini o SVG.

Domande Frequenti

Come funziona il trucco del triangolo CSS? ▼

Con larghezza e altezza a 0 e bordi spessi, i bordi formano quattro triangoli. Tre trasparenti rivelano un triangolo visibile.

Posso creare forme diverse? ▼

Questo generatore crea triangoli. Per altre forme, usa border-radius o clip-path.

Funziona in tutti i browser? ▼

Sì. La tecnica dei bordi è una delle più vecchie e supportate del CSS.