Generatore di triangoli CSS

Il trucco del bordo, un hack CSS di 25 anni che funziona ancora

La tecnica del triangolo CSS sfrutta il modo in cui l'algoritmo CSS di disegno dei bordi gestisce i bordi adiacenti. Quando due bordi si incontrano in un angolo, il confine tra loro viene disegnato come una linea diagonale all'angolo che biseca lo spigolo. Con un elemento di dimensioni normali, l'angolo è piccolo e la diagonale è appena visibile. Ma se imposti larghezza e altezza dell'elemento a zero e gli dai bordi spessi, gli angoli prendono il sopravvento sull'intero spazio visivo, e quella che era una diagonale invisibile diventa il bordo visibile di un triangolo. Rendi trasparenti tre dei quattro bordi, lascia il quarto colorato, e hai disegnato un singolo triangolo che punta lontano dal lato colorato. La tecnica è stata documentata ampiamente per la prima volta intorno al 2007-2008 nei primi articoli di CSS-Tricks di Chris Coyier e altri; è stata da allora un pilastro della cassetta degli attrezzi del web designer perché produce una forma nitida, scalabile, colorabile in HEX, senza SVG, senza PNG, senza richieste HTTP aggiuntive e senza CSS complicato. La matematica è semplice ma controintuitiva (l'altezza del triangolo è la border-width del lato colorato; la sua base è il doppio della border-width del lato trasparente adiacente). Questo generatore gestisce la matematica per te così puoi trascinare i cursori invece di calcolare le border-width.

Alternative moderne, clip-path, SVG, conic-gradient

Nel 2026, il triangolo con il trucco del bordo ha concorrenza. CSS clip-path con la funzione polygon() (CSS Masking Module Level 1, supporto baseline nei browser dal 2017) ti permette di ritagliare qualsiasi elemento a un poligono arbitrario: clip-path: polygon(50% 0, 100% 100%, 0 100%) disegna un triangolo che punta verso l'alto su qualsiasi elemento. clip-path è più flessibile (qualsiasi numero di vertici, non solo tre; funziona su qualsiasi elemento con contenuto al suo interno, non solo div vuoti), si compone meglio con trasformazioni e animazioni, e supporta angoli arrotondati tramite la funzione più recente shape(). SVG inline (<svg><polygon points="50,0 100,100 0,100"/></svg>) ti dà il massimo controllo, contorni, riempimenti, gradienti, animazioni tramite SMIL o CSS, accessibilità tramite elementi <title>. conic-gradient può produrre forme triangolari tramite color stop posizionati abilmente, anche se è più una curiosità che un pattern pratico. Il triangolo con il trucco del bordo rimane la scelta giusta per il caso decorativo semplice (puntatori di tooltip, frecce di dropdown, code di fumetti) dove semplicità e zero overhead contano più della flessibilità; clip-path è migliore quando il triangolo è parte di una forma più complessa, quando devi mettere testo dentro o quando il design potrebbe richiedere angoli arrotondati.

Dove i triangoli CSS si guadagnano il pane

• Puntatori di tooltip e popover. Il piccolo triangolo che collega un fumetto di tooltip al suo elemento di ancoraggio è il caso d'uso più comune, puoi costruirlo come pseudo-elemento triangolo CSS (::before o ::after) sul tooltip, posizionato sopra il bordo che guarda l'ancora.
• Code dei fumetti. La coda appuntita sui fumetti dei messaggi di chat, sulle card dei commenti e sui callout delle citazioni. Stessa tecnica dei puntatori di tooltip, solo più grande e stilizzata per corrispondere al colore di sfondo del fumetto.
• Indicatori a freccia per i dropdown. Il piccolo triangolo verso il basso nelle select box e nei pulsanti dei menu a discesa. Gli elementi nativi <select> hanno frecce stilizzate dal sistema operativo; i dropdown personalizzati costruiti con <button> più popover hanno bisogno della propria.
• Indicatori di espansione/contrazione per accordion. Il triangolo che si capovolge tra puntare a destra (chiuso) e puntare verso il basso (aperto) quando clicchi una sezione di un accordion. Animato con una trasformazione CSS rotate.
• Separatori dei breadcrumb. Il triangolo che punta a destra tra i link delle briciole. Spesso costruito come triangolo CSS con ::before.
• Decorazioni di banner e fettucce. La tacca triangolare alla fine di un banner di saldi o di un'etichetta, la piega d'angolo su un badge "nuovo", lo chevron in fondo a una hero section che punta in basso per scorrere. Tutti triangoli a un solo colore, tutti col trucco del bordo.
• Divisori decorativi. Una fila di piccoli triangoli come divisori di sezione, sovrapposizioni a pattern geometrico, fronzoli in stile retrò.

Considerazioni di accessibilità

I triangoli CSS sono pura decorazione visiva, non hanno significato semantico né presenza nell'albero di accessibilità. Gli screen reader non li annunciano. Per usi puramente decorativi (la coda del fumetto, il separatore di breadcrumb) questo è il comportamento corretto. Per triangoli che trasmettono significato (una freccia che indica la sezione attiva, una freccia di dropdown che indica "clicca per altro"), il significato deve essere comunicato in altro modo: un attributo aria-expanded su un trigger di dropdown, un'etichetta di testo visibile, un aria-label sul pulsante. Non affidarti a un triangolo CSS per comunicare uno stato; trattalo come un rinforzo visivo di uno stato che è comunicato semanticamente attraverso altri attributi. Il contenuto degli pseudo-elementi CSS ::before e ::after generalmente non viene letto dagli screen reader, il che è appropriato per le forme decorative.

Tipi di triangolo che questo generatore produce

• Alto / Basso, che puntano verso l'alto o verso il basso (isoscele)
• Sinistra / Destra, che puntano a sinistra o a destra
• Alto-sinistra / Alto-destra, triangoli d'angolo
• Basso-sinistra / Basso-destra, triangoli d'angolo che puntano in direzione opposta
• Aspetto personalizzato, rapporto larghezza/altezza regolabile per forme non equilatere

Strumenti correlati