Generatore di triangoli e frecce CSS

Generatore di triangoli e frecce CSS

Scegli una direzione, una larghezza, un'altezza e un colore, e questo strumento scrive la regola CSS che disegna la forma — un triangolo che punta verso l'alto, il basso, sinistra o destra, o un triangolo d'angolo per un badge in stile nastro. Non c'è un file immagine da esportare e nessun markup aggiuntivo da aggiungere: la forma è CSS puro, quindi si ridimensiona perfettamente a qualsiasi dimensione e rimane nitido su schermi ad alta densità. È il blocco di costruzione dietro i cursori a discesa, gli indicatori di accordion, i badge a nastro e il piccolo puntatore su un tooltip o una bolla di chat.

Sono supportate due tecniche. Il trucco del bordo imposta i bordi opposti di una casella di dimensione zero come trasparenti e colora il resto — la ricetta classica, con il più ampio supporto del browser. clip-path invece disegna la forma su una casella dimensionata utilizzando un poligono, il che è più facile da leggere negli strumenti di sviluppo e da animare. Passa da una tecnica all'altra con l'opzione tecnica.

Attiva "Usa come pseudo-elemento ::after" per una regola limitata a ::after, posizionata assolutamente rispetto al lato o all'angolo che hai scelto, pronta da applicare su un elemento che ha già un posizionamento relativo — esattamente quello che serve un cursore di menu a discesa o il puntatore di un tooltip, senza HTML aggiuntivo. Attiva invece "Fumetto con freccia allegata" e lo strumento genera due regole insieme: una casella di callout bordata e arrotondata e una coda di freccia allegata al suo bordo, che punta nella direzione che hai scelto — la forma dietro una bolla di chat o un popover di testo di aiuto.

Tutto viene eseguito nel tuo browser: nulla di quello che configuri viene mai inviato da nessuna parte. Copia il CSS generato, scaricalo come file .txt o invialo all'input di un altro strumento — i generatori di border-radius o clip-path, ad esempio — per continuare a perfezionare la forma.

FAQ