Softonic

Generatore di triangoli CSS

Passaggio 1 / 2
Avanti

Il classico triangolo CSS non è affatto un triangolo, è un elemento a larghezza zero e altezza zero con tre bordi trasparenti e un bordo colorato che si incontra in un punto. Questo generatore produce quella dichiarazione per te in quattro direzioni (su, giù, sinistra, destra), dimensionato al valore in pixel che scegli e riempito con il colore che selezioni. Ottimo per frecce di tooltip, bolle di dialogo e separatori di breadcrumb.

Come costruire un triangolo con i bordi

  1. 1

    Scegli una direzione

    Su, giù, sinistra o destra. La direzione determina quale bordo riceve il colore e quali tre rimangono trasparenti.

  2. 2

    Imposta la dimensione

    Il valore della dimensione è utilizzato per tutte le larghezze dei bordi. Un triangolo di 60px sarà largo (o alto, a seconda della direzione) 120px.

  3. 3

    Scegli un colore di riempimento

    Il selettore colore accetta solo valori esadecimali (ad esempio `#10b981`); i colori rgb, rgba o con nome non sono supportati. Il colore viene applicato solo al bordo opposto.

  4. 4

    Copia la regola CSS

    L'output è un insieme di regole completo `.triangle { ... }`, inseriscilo nel tuo foglio di stile e aggiungi `<div class="triangle"></div>` dove necessario.

Perché funziona il trucco del bordo

Quando una casella ha width: 0 e height: 0, i suoi quattro bordi si incontrano in un unico punto centrale. Poiché i bordi si uniscono a 45 gradi, ogni bordo è già un triangolo, tre di essi sono semplicemente invisibili. Rendi un bordo colorato e vedrai quel triangolo.

Mappa delle direzioni

Direzione Bordo visibile Bordi trasparenti
Su border-bottom border-left, border-right, border-top
Giù border-top border-left, border-right, border-bottom
Sinistra border-right border-top, border-bottom, border-left
Destra border-left border-top, border-bottom, border-right

Calcolo delle dimensioni

Tutti e tre i bordi trasparenti condividono il valore della dimensione. Il bordo visibile utilizza la stessa dimensione. Quindi un triangolo con size: 60:

  • Larghezza = 2 × 60 = 120px per triangoli su/giù
  • Altezza = 2 × 60 = 120px per triangoli sinistra/destra

Se hai bisogno di un triangolo asimmetrico (base più stretta, punta più alta), dai ai bordi trasparenti una dimensione e al bordo visibile una dimensione diversa, ad esempio border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid red; dà un triangolo alto e stretto verso l’alto.

Quando optare per SVG invece

  • Hai bisogno di più punti, non tre, usa <polygon>.
  • Il triangolo deve scalare fluidamente con il genitore, usa un viewBox e preserveAspectRatio.
  • Vuoi un riempimento a gradiente, una linea o una punta arrotondata, i bordi CSS non possono fare nessuna di queste cose.

Domande frequenti

Non solo con i bordi, le larghezze dei bordi non accettano % o vw in modo ben supportato. Se hai bisogno di scalabilità fluida, passa a un SVG <polygon> o usa clip-path: polygon(...) su un elemento normale.

Non puoi arrotondare l’angolo dove i bordi si incontrano. Usa un SVG con un percorso tracciato e stroke-linejoin: round, o clip-path: polygon(...) combinato con un leggero filter: drop-shadow per mascherare il bordo.

Sì, questo è l’uso più comune. Posiziona il triangolo assolutamente contro il bordo del tooltip e abbina il colore di riempimento allo sfondo del tooltip in modo che venga percepito come un’unica bolla.

Sì. Direzione, dimensione e colore scelti vengono inviati al nostro server con la richiesta della pagina, che così può generare il CSS. Nel flusso passo passo viaggiano anche nel link della pagina. Non vengono memorizzati.

Strumenti correlati

Riferimento Tabella ASCII

Tabella ASCII completa da 0 a 127 con decimale, esadecimale, ottale, binario e riferimento numerico HTML per ogni carattere, inclusi i codici di controllo come NUL, LF e DEL.

Generatore di lettere casuali

Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.

Riferimento ai caratteri HTML

Elenco ricercabile delle entità HTML, dei loro codici nominati e numerici, e copia con un clic per caratteri e simboli speciali.

Riferimento scorciatoie da tastiera

Cerca le scorciatoie predefinite documentate di VS Code, Chrome e Bash con GNU Readline su macOS, Windows e Linux.

Trova nome colore

Trova il colore CSS standard con nome più vicino a un valore HEX, RGB o HSL usando la differenza CIEDE2000.

Semplificatore di Algebra Booleana

Valuta un'espressione booleana per ogni combinazione di input e mostra la tabella della verità completa. Supporta fino a cinque variabili e gli operatori &, |, ! e ^.

Strumento disponibile in altre lingue