Generatore di triangoli in CSS

Il Generatore di Triangoli CSS è uno strumento interattivo che consente di creare triangoli CSS puri senza utilizzare immagini o SVG. Sfrutta il trucco dei bordi CSS per produrre triangoli in 8 direzioni (su, giù, sinistra, destra e quattro diagonali) con dimensioni e colore personalizzabili. Il codice CSS generato può essere copiato direttamente nel tuo progetto.

Seleziona una direzione del triangolo dai pulsanti di direzione (su, giù, sinistra, destra o diagonale). Regola larghezza e altezza utilizzando i cursori per controllare le dimensioni del triangolo. Scegli un colore usando il selettore colore. L'anteprima si aggiorna in tempo reale e il codice CSS generato appare in basso. Fai clic sul pulsante copia per copiare il CSS negli appunti.

I triangoli CSS utilizzano una tecnica ingegnosa con i bordi. Quando un elemento ha larghezza e altezza zero, i suoi bordi si incontrano nel punto centrale. Rendendo alcuni bordi trasparenti e altri colorati, si crea l'apparenza di un triangolo. Ad esempio, un triangolo rivolto verso l'alto utilizza bordi sinistro e destro trasparenti con un bordo inferiore colorato. Le larghezze dei bordi determinano la dimensione e le proporzioni del triangolo.

Il generatore supporta 8 direzioni: su, giù, sinistra, destra, in alto a sinistra, in alto a destra, in basso a sinistra e in basso a destra. I triangoli diagonali utilizzano solo due bordi invece di tre, creando una forma triangolare rettangola. La larghezza controlla la base del triangolo e l'altezza controlla la sua altezza. Per un triangolo isoscele perfetto, imposta larghezza e altezza allo stesso valore.

I triangoli CSS sono comunemente usati per frecce di tooltip, puntatori di menu a discesa, code di fumetti, separatori di breadcrumb ed elementi decorativi. Sono leggeri, non richiedono richieste HTTP aggiuntive e si ridimensionano perfettamente a qualsiasi risoluzione. Combinati con transizioni e trasformazioni CSS, consentono animazioni fluide.