Creare triangoli con css

Realizzare triangoli con i css è possibile ed è anche molto semplice, per farlo occorre capire come funzionano i bordi e l’esempio che riporto qui dovrebbe già farvi capire dove voglio andare a parare.

Creiamo un semplice blocco e assegnamoli un bordo:

HTML

 
<div id="blocco"></div>
 

CSS

 
#blocco
{
            width:200px;
            height:200px;
            border:30px;
            border-style: solid;
            border-bottom-color: red;
            border-left-color: green;
            border-right-color: yellow;
            border-top-color: blue;
}
 

Settiamo larghezza e lunghezza del contenitore a 0px e rimarranno solo i bordi:

CSS

 
#blocco
{
            width:0px;
            height:0px;
            border:30px;
            border-style: solid;
            border-bottom-color: red;
            border-left-color: green;
            border-right-color: yellow;
            border-top-color: blue;
}
 

E quello che viene dopo è ovvio, se vogliamo un triangolo verso l’alto settiamo a transparent il colore di tutti i bordi tranne quello di quello in basso. Il risultato sarà questo:

CSS

 
#blocco
{
            width:0px;
            height:0px;
            border:30px;
            border-style: solid;
            border-bottom-color: red;
            border-left-color: transparent;
            border-right-color: transparent;
            border-top-color: transparent;
}