Generatore di triangoli CSS: codice con border e clip-path | We.Inc
Scegli una di otto direzioni, imposta larghezza, altezza e colore e copia un triangolo CSS realizzato con i bordi o con clip-path, più la versione Tailwind e un esempio di freccia per tooltip.
Generatore di triangoli CSS
Ci sono due modi puliti per disegnare un triangolo in CSS. Il trucco classico dà a un box di dimensione zero dei bordi spessi e rende trasparenti tutti tranne uno. Il modo moderno dà a un normale box una dimensione e uno sfondo, poi lo ritaglia con clip-path: polygon() usando tre punti. Questo generatore scrive entrambi per otto direzioni.
Metodo dei bordi o clip-path?
Esigenza
Metodo dei bordi
Freccia piena di un solo colore
Funziona ovunque
Funziona in tutti i browser attuali
Riempimento con gradiente o immagine
No, i bordi hanno un solo colore ciascuno
Sì, ritaglia qualsiasi sfondo
Solo contorno
Sovrapponi due triangoli
Non direttamente; clip-path taglia anche bordi e ombre
Dimensione impostata con width e height
No, la dimensione dipende dallo spessore dei bordi
Sì
Freccia di tooltip su ::before o ::after
La scelta abituale
Va bene anche questo
Le frecce di tooltip, fumetti, menu a tendina e gli angoli dei nastri sono quasi sempre piccoli triangoli CSS. Scegli una direzione, trascina la dimensione e l'anteprima mostra entrambe le tecniche fianco a fianco, così vedi che coincidono prima di copiare quella adatta al tuo componente.
Scegli una direzione: su, giù, sinistra, destra o uno dei quattro triangoli d'angolo.
Imposta larghezza, altezza e colore. Il pulsante equilatero imposta l'altezza alla larghezza per 0.866.
Confronta le due anteprime, poi copia la versione con i bordi, quella con clip-path o le classi Tailwind.
Nel metodo dei bordi, lo spessore del bordo colorato diventa l'altezza del triangolo e i due lati trasparenti prendono ciascuno metà della base.
Usa clip-path quando il triangolo ha bisogno di un gradiente, di un'immagine o di un cambio di colore all'hover su un box dimensionato.
Per le frecce dei tooltip, posiziona il triangolo con position: absolute su uno pseudo-elemento, così non aggiunge markup.
Ti servono più di tre punti? Il generatore di clip-path ti permette di trascinare ogni angolo di un poligono.
Domande frequenti
Come funziona il trucco del triangolo con i bordi?
Dove due bordi si incontrano, il browser disegna l'angolo in diagonale. Con width e height a 0, il box non è altro che quattro spicchi di bordo che si incontrano al centro. Colora uno spicchio e rendi trasparenti quelli adiacenti e vedrai un solo triangolo.
Come creo un triangolo equilatero?
L'altezza di un triangolo equilatero è la base per la radice quadrata di 3 diviso 2, circa 0.866. Per una base di 100 pixel, usa un'altezza di circa 87 pixel.
Un triangolo CSS può avere un bordo o un contorno?
Non da solo. Un approccio comune è sovrapporre due triangoli: uno leggermente più grande nel colore del contorno dietro e quello del colore di riempimento sopra, spostato dello spessore del contorno. Un SVG inline con uno stroke è più semplice quando ti serve un contorno nitido.
clip-path cambia il box di layout dell'elemento?
No. L'elemento mantiene la sua dimensione rettangolare completa nel layout; clip-path cambia solo ciò che viene disegnato. Il contenuto al di fuori del poligono, comprese ombre e bordi, viene tagliato.
Come scrivo un triangolo con clip-path in Tailwind?
Usa una proprietà arbitraria con i trattini bassi al posto degli spazi, come [clip-path:polygon(50%_0,100%_100%,0_100%)], insieme a classi di dimensione e colore come w-[40px] h-[30px] bg-[#4F98FB].
Scegli il metodo in base all'uso del triangolo
Per una piccola freccia che sporge da un tooltip o da un menu, il metodo dei bordi resta il codice più breve e sta comodamente su uno pseudo-elemento. Ha un solo colore e la sua dimensione dipende dallo spessore dei bordi, che è tutto ciò che serve a una freccia.
Per una forma decorativa, un angolo dell'hero o qualsiasi cosa con un gradiente, clip-path è più semplice da gestire: imposti larghezza e altezza come per qualsiasi box e descrivi i tre angoli in percentuale.
Triangoli d'angolo
I triangoli d'angolo sono rettangoli e riempiono metà di un rettangolo. Con i bordi colori un lato e rendi trasparente un lato adiacente, lasciando gli altri due a zero. Sono utili per gli angoli di carta piegata e le code dei nastri.
Freccia di tooltip con uno pseudo-elemento
Fumetto con freccia verso il basso
L'elemento ::after non ha dimensione. Il suo bordo superiore è la freccia e i bordi laterali sono trasparenti.
Triangolo con gradiente tramite clip-path
Un triangolo fatto con i bordi non può avere un gradiente. Un box ritagliato sì, perché clip-path taglia qualsiasi sfondo il box disegni.
Costruttore di triangoli
Scegli una direzione, imposta dimensione e colore e confronta il triangolo con i bordi con quello con clip-path prima di copiare.