Generatore di Triangolo CSS

Scegli direzione, dimensione e colore per costruire un triangolo con CSS puro, poi copia il codice. Viene usata la classica tecnica del div a larghezza e altezza zero con bordi trasparenti — nessun file immagine, nessun SVG, nessun clip-path — solo poche dichiarazioni border che qualsiasi browser comprende.

Che cos'è questo strumento?

Il CSS non ha una forma triangolare dedicata, quindi i triangoli si costruiscono con un trucco ben noto: prendi un elemento con larghezza e altezza zero, dagli un bordo pieno su un lato e bordi trasparenti sugli altri due lati adiacenti. Poiché i bordi adiacenti si incontrano a un angolo di 45 gradi, i bordi trasparenti si restringono fino a un punto, lasciando visibile solo il bordo colorato, a forma di triangolo.

Questo strumento costruisce quella struttura per te: scegli in quale direzione deve puntare il triangolo, quanto grande deve essere e di che colore, poi osserva l'anteprima in tempo reale aggiornarsi e copia il CSS esatto. È lo stesso trucco usato in tutto il web per frecce solo-CSS, puntatori di tooltip e caret dei menu a tendina.

Fonte: CSS Backgrounds and Borders Module Level 3, W3C — definisce come i bordi adiacenti si incontrano ad angolo, il meccanismo su cui si basa questa tecnica del triangolo.

Perché usarlo?

L'anteprima in tempo reale mostra il triangolo reale così puoi confermare dimensione, direzione e colore prima di copiare qualsiasi cosa.
Copre tutte e quattro le direzioni base — su, giù, sinistra, destra — con un unico controllo.
Non servono file immagine o SVG — un triangolo costruito così è solo poche righe di CSS.
Utile per puntatori di tooltip, caret di menu a tendina/accordion, punti elenco personalizzati e forme decorative semplici.
Funziona interamente nel browser: nessuna delle impostazioni configurate viene caricata da nessuna parte.
Gratuito, senza registrazione, funziona su dispositivi mobili.

Come si usa

Scegli una direzione — il triangolo punta su, giù, sinistra o destra a seconda di quale lato riceve il bordo pieno.
Imposta la dimensione — controlla il valore border-width su tutti e tre i lati e determina quanto grande appare il triangolo.
Scegli un colore per il bordo visibile (pieno), che diventa il colore di riempimento del triangolo.
Copia il CSS generato e applicalo a un elemento con width: 0 e height: 0 — un <div> vuoto o uno pseudo-elemento come ::before/::after funzionano entrambi bene.

Esempio

Input

Direzione: giù · Dimensione: 60px · Colore: #ea580c

Risultato

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea580c;

Per un triangolo che punta verso il basso, il colore pieno va su border-top mentre i bordi sinistro e destro restano trasparenti — il lato opposto alla direzione verso cui punta il triangolo.

Perché larghezza e altezza zero sono importanti

Il trucco funziona solo perché l'elemento non ha un proprio box di contenuto — width: 0 e height: 0 significano che l'intera forma visibile deriva puramente dai bordi che si incontrano nel punto centrale. Se l'elemento ha una qualsiasi larghezza o altezza, i bordi non si restringono più fino a un punto netto e la forma si rompe. Questo è anche il motivo per cui la tecnica funziona altrettanto bene su un <div> vuoto o su uno pseudo-elemento ::before/::after con content: "" — non serve contenuto reale, solo il box del bordo.

La documentazione MDN sulla proprietà CSS border spiega come si combinano border-width, border-style e border-color, incluso come i bordi di lati adiacenti si incontrano in diagonale (developer.mozilla.org/en-US/docs/Web/CSS/border) — il fatto geometrico su cui si basa questa intera tecnica.

Usi comuni dei triangoli CSS

Puntatori di tooltip e fumetti: un piccolo triangolo (6–10px) posizionato sul bordo di un box arrotondato, colorato per abbinarsi allo sfondo del box.
Caret di menu a tendina e select: un piccolo triangolo verso il basso accanto a un pulsante o elemento select per indicare che apre un menu.
Indicatori di accordion/espansione: un triangolo che punta a destra e ruota verso il basso quando una sezione viene espansa.
Punti elenco personalizzati: un piccolo triangolo che punta a destra al posto del punto elenco predefinito del browser, per uno stile di lista più distintivo.
Angoli semplici per banner/nastri: un triangolo incastrato nell'angolo di una card per simulare un effetto nastro piegato.

Abbinamento con altri strumenti CSS

I triangoli usati come puntatori di tooltip di solito necessitano di un'ombra corrispondente per integrarsi visivamente con il box a cui sono collegati — il Generatore di Box Shadow produce quell'ombra. Per forme dell'interfaccia oltre ai triangoli (chevron, stelle, esagoni), clip-path è generalmente l'approccio moderno migliore invece di accumulare altri trucchi con i bordi.

→ Generatore di ombreggiatura dei riquadri · Generatore di raggio di bordo

Domande frequenti

Perché il colore va sul bordo opposto alla direzione verso cui punta il triangolo?

Immagina l'elemento come un rombo formato da quattro segmenti triangolari di bordo che si incontrano al centro. Se il colore pieno è sul bordo superiore, la forma visibile occupa la metà superiore — ma poiché l'elemento ha dimensione zero, quel triangolo di 'metà superiore' in realtà punta verso il basso, verso dove si sarebbe trovato l'inesistente box di contenuto dell'elemento. La stessa logica si applica a tutte e quattro le direzioni.

Posso creare un triangolo che non sia perfettamente isoscele?

Sì — questo strumento genera sempre un triangolo simmetrico per semplicità, ma puoi modificare manualmente il CSS copiato in seguito. Rendere disuguali i due border-width trasparenti inclina il triangolo su un lato; cambiare indipendentemente la larghezza del bordo pieno ne modifica l'altezza senza influire sulla larghezza della base.

Questa tecnica funziona in tutti i browser?

Sì — il trucco del triangolo basato sui bordi si basa solo sul supporto di base di border-width, border-style e border-color, esistente fin dalle prime implementazioni CSS. È una delle tecniche di forme in CSS puro più ampiamente compatibili disponibili.

Quando dovrei usare clip-path invece del trucco dei bordi?

Il trucco dei bordi è ideale specificamente per triangoli semplici, poiché non richiede proprietà aggiuntive e funziona ovunque. Per qualcosa di più complesso — pentagoni, stelle, frecce con una tacca, o tagli diagonali su un box che deve comunque mostrare un'immagine di sfondo — clip-path è più flessibile e più facile da ragionare, sebbene abbia un supporto più limitato sui browser meno recenti.

Posso inserire testo o un'icona dentro il triangolo?

Non direttamente — poiché l'elemento del triangolo ha larghezza e altezza zero, non c'è un box di contenuto in cui inserire nulla. Per combinare un triangolo con testo o un'icona, usalo come pseudo-elemento decorativo (::before/::after) su un elemento genitore che lo posizioni in modo assoluto, poi stilizza il contenuto reale del genitore separatamente.