Categoria: Sviluppo
Generatore di triangoli CSS
Crea un triangolo in puro CSS con il trucco dei bordi
Scegli direzione, dimensione e colore per creare un box a dimensione zero con bordi colorati che appare come un triangolo, con un'anteprima dal vivo e la dichiarazione CSS pronta da copiare. Tutto viene calcolato nel tuo browser.
width: 0; height: 0; border-right: 80px solid transparent; border-bottom: 80px solid #0f7b63; border-left: 80px solid transparent;
Tutto ciò che c'è in questa pagina viene elaborato nel tuo browser. Niente viene caricato.
A cosa serve
Un triangolo CSS è un box con `width: 0; height: 0;` i cui bordi hanno un colore su un lato e sono resi trasparenti sugli altri due, così si vede solo il cuneo del bordo colorato. È facile sbagliarlo a mano, la coppia di lati sbagliata, o un bordo lasciato pieno invece che trasparente, quindi questo strumento costruisce le quattro dichiarazioni a partire da una direzione, una dimensione e un colore e mostra il risultato su un box reale mentre li modifichi.
Come si usa
- Scegli una direzione: su, giù, sinistra o destra.
- Imposta la dimensione e il colore.
- Copia le dichiarazioni dei bordi nel tuo foglio di stile.
Privacy
Questo strumento funziona interamente nel tuo browser. Quello che inserisci non viene mai caricato, salvato o condiviso: chiudendo la scheda sparisce.
Domande frequenti
- Viene inviato qualcosa a un server?
- No. L'anteprima è un vero bordo CSS renderizzato dal tuo browser, e la dichiarazione è testo assemblato nella pagina.
- Perché il triangolo richiede larghezza e altezza impostate a 0?
- Il trucco dei bordi si basa sul fatto che i bordi si incontrano in un punto invece di racchiudere un box. Una larghezza o un'altezza diversa da zero appiattirebbe il cuneo in un trapezio.
- Posso usarlo per una freccia su un tooltip o un fumetto?
- Sì, è l'uso più comune. Posiziona il triangolo in modo assoluto contro il bordo del tooltip e abbina il suo colore allo sfondo del tooltip.