Forme con i CSS: disegnare triangoli

Sfruttando il modo in cui vengono definiti i bordi degli elementi tramite i CSS, è possibile creare facilmente forme triangolari.

Facendo qualche ricerca in rete, si scopre che i primi esperimenti su questo versante risalgono a diversi anni fa. Su questa pagina del sito di Mark Wilton Jones si fa addirittura riferimento a browser preistorici come Netscape 4 e IE 4/5.

Più recentemente tali tecniche hanno trovato spazio in contesti meno sperimentali, ovvero in scenari d'uso reali. Ci limitiamo a segnalare un bel tutorial di Codrops in cui queste forme alternative definiscono l'intero aspetto di un layout, oppure il post di John Rohan in cui la realizzazione di triangoli con i CSS è funzionale alla creazione di un classico fumetto (speech bubble).

Creare un triangolo con i CSS

Come si accennava all'inizio, per creare forme triangolari con i CSS sfruttiamo i bordi di un elemento, aumentandone lo spessore secondo le necessità e usando la possibilità di definire un colore trasparente. Vediamo un esempio:

L'analisi del codice usato per realizzare questo triangolo ci consente di spiegare la tecnica in dettaglio:

div#triangolo {
  width: 0; height: 0; line-height: 0;
  border-bottom: 80px solid blue;
  border-left:   80px solid transparent;
  border-right:  80px solid transparent;
}

Si parte nello specifico da un div (ma può essere un qualunque elemento blocco). Dobbiamo definire per prima cosa una larghezza, un'altezza e un'altezza di riga pari a 0:

width: 0;
height: 0;
line-height: 0;

Si passa poi ai bordi:

border-bottom: 80px solid blue;
border-left: 80px solid transparent;
border-right: 80px solid transparent;

Le dimensioni assegnate a ciascuno definiscono in prima istanza le dimensioni del triangolo, ma variandone i valori anche la sua forma (con tre valori identici si ottiene, ad esempio, un triangolo equilatero). Fondamentale è però il valore relativo al colore (il terzo). Nel nostro esempio il bordo inferiore (border-bottom) è blue, mentre per i bordi laterali (border-left e border-right) usiamo la keyword transparent (il colore visibile diventa così quello dello sfondo). Per il bordo superiore (border-top), che nell'esempio corrisponde alla punta, non definiamo alcuna regola, lasciando dunque il valore di default per il bordo, ovvero 0.

Possiamo così sintetizzare il procedimento:

• azzeriamo width, height e line-height;
• per il lato con la punta non impostiamo alcuna regola;
• per il lato opposto alla punta creiamo un bordo solido con una dimensione a piacere e con un colore;
• per gli altri due lati creiamo bordi con dimensioni definite, ma impostiamo il valore del colore su transparent.

Se, dunque, vogliamo un triangolo con la punta rivolta verso il basso

useremo questo codice:

div#triangolo2 {
width: 0;
height: 0;
line-height: 0px;
border-top: 80px solid blue;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
}

Chiarito il funzionamento della tecnica, possiamo segnalare per concludere due ottime risorse: CSS3 Shapes e How To Create Different Shapes In CSS. Entrambe propongono una raccolta di snippet di codice da copiare, incollare e usare come base nei nostri progetti non solo per varie tipologie di triangoli, ma per tutta una serie di forme alternative. Il tutto usando solo i CSS!