Generatore di triangoli CSS
Genera codice CSS per triangoli basati su bordi con direzione e dimensioni configurabili.
Esegui lo strumento
Questo strumento genera il codice CSS necessario per creare triangoli geometrici tramite bordi su elementi HTML vuoti. Impostando larghezza e altezza su zero, il foglio di stile modella la figura applicando bordi con stile pieno e spessori calcolati in pixel. Puoi specificare la direzione desiderata tra le otto configurazioni previste: in alto, in basso, a sinistra, a destra oppure lungo i quattro angoli diagonali. Il generatore calcola le dimensioni dei singoli bordi dividendo il valore inserito per ottenere le proporzioni corrette. Se inserisci un orientamento non riconosciuto, il generatore applica automaticamente lo schema geometrico rivolto verso l'alto, mantenendo il testo immesso nel selettore CSS finale. Il codice generato definisce i bordi trasparenti e include le regole dimensionali pronte per essere integrate in fogli di stile, tooltip, frecce di navigazione o indicatori di menu. Inserisci la dimensione numerica per ottenere immediatamente il blocco di codice CSS da copiare nei tuoi progetti web.
Istruzioni
- Indica la direzione del triangolo, ad esempio up, down, left, right oppure una diagonale.
- Imposta la dimensione numerica desiderata per definire la scala in pixel.
- Compila facoltativamente il campo del colore se desideri includere un valore di riferimento.
- Avvia la generazione per visualizzare il blocco di regole CSS risultante nel pannello.
- Copia il frammento CSS generato e incollalo nel foglio di stile del tuo progetto.
Esempi
- Imposta direzione su 'down' e dimensione su 30 per generare un triangolo puntato verso il basso con bordi laterali di 15px e bordo superiore di 30px.
- Imposta direzione su 'top-right' e dimensione su 40 per ottenere un triangolo diagonale orientato verso l'angolo superiore destro.
FAQ
Come funziona la tecnica dei triangoli in puro CSS?
La tecnica azzera larghezza e altezza di un elemento a blocco, sfruttando l'intersezione angolare dei bordi spessi per creare forme triangolari visibili.
Quali orientamenti sono supportati dallo strumento?
I valori previsti sono up, down, left, right, top-left, top-right, bottom-left e bottom-right.
Cosa accade se inserisco una direzione non valida?
Il generatore adotta lo schema di bordi del triangolo rivolto verso l'alto (up), conservando il nome inserito all'interno del selettore CSS.
Il valore del colore modifica i bordi nel codice generato?
Nel codice prodotto le proprietà del colore mantengono valori trasparenti; puoi personalizzare la tinta finale direttamente nella tua regola CSS.