Design
Generatore triangolo CSS
Inserimento
Scegli direzione, base, altezza e colore.
Direzione
Base Width60px
Altezza80px
Copia il CSS generato e applicalo a un elemento vuoto.
Risultato
.triangle {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 80px solid #6366f1;
}Domande frequenti
Come funzionano i triangoli CSS?
I triangoli CSS sfruttano il modo in cui i bordi si incontrano agli angoli quando l'elemento ha larghezza e altezza zero. Quando tre bordi sono trasparenti e uno è colorato, il bordo colorato forma un triangolo. La direzione del triangolo dipende da quale bordo è colorato. È una tecnica CSS pura senza bisogno di immagini.
Quando usare i triangoli CSS rispetto a SVG?
Triangoli CSS: tooltip semplici, caret di dropdown, indicatori direzionali — veloci, nessun file extra. SVG: forme complesse, icone scalabili, animazioni o triangoli che devono essere stilizzati dinamicamente. I triangoli CSS sono più difficili da mantenere per le forme non ad angolo retto; SVG è più flessibile.
Come centro un triangolo CSS?
Usa position: absolute sul triangolo e position: relative sul genitore. Centra con left: 50%; transform: translateX(-50%); per il centramento orizzontale, o top/bottom con trasformate simili per il verticale. I triangoli CSS non rispondono a text-align: center.