Creare triangoli con i CSS
This entry was posted on January 7th, 2010 and is filed under CSS.
Vacanze di Natale ormai finite e si ricomincia a lavorare a pieno regime. Augurando a tutti (seppur in ritardo) un felice anno nuovo, vengo a presentare questo trucchetto CSS molto carino e che può rivelarsi abbastanza utile.
L’autore dell’articolo originale è Jon Rohan che ci spiega come realizzare dei triangoli utilizzando puro codice CSS. Negli esempi che vedremo insieme non si farà uso di immagini di background o di Javascript ma semplicemente del foglio di stile.
Vediamo insieme quanto sia semplice realizzarli.
Il concetto che sta alla base è molto semplice: bisogna lavorare sui bordi di un div. Vediamo insieme il codice necessario a realizzare un triangolo con la punta rivolta verso destra.
.right-arrow {
border-color:transparent transparent transparent #333;
border-style:solid;
border-width:10px 0 10px 20px;
float:left;
height:0;
margin:0 10px;
width:0;
}
Il risultato sarà il seguente:
Il triangolo che vedete in alto non è un’immagine ma un semplice div. Ovviamente cambiando le impostazioni del colore e della dimensione del bordo è possibile “ruotare” il triangolo in tutte e quattro le posizioni. Vediamo insieme il codice completo per realizzare i quattro trinangoli:
.left-arrow {
border-color:transparent #333 transparent transparent;
border-style:solid;
border-width:10px 20px 10px 0;
float:left;
height:0;
margin:0 10px;
width:0;
}
.right-arrow {
border-color:transparent transparent transparent #333;
border-style:solid;
border-width:10px 0 10px 20px;
float:left;
height:0;
margin:0 10px;
width:0;
}
.up-arrow {
border-color:transparent transparent #333;
border-style:solid;
border-width:0 20px 20px;
float:left;
height:0;
margin:0 10px;
width:0;
}
.down-arrow {
border-color:#333 transparent transparent;
border-style:solid;
border-width:20px 20px 0;
float:left;
height:0;
margin:0 10px;
width:0;
}
Il risultato sarà quindi il seguente:
Sfruttando le proprietà del CSS possiamo poi realizzare forme un pò più elaborate. Possiamo infatti sfruttare lo stile del bordo e ottenere qualcosa di questo genere:
Questo piccolo esempio è stato ottenuto semplicemente modificando il border-style da solid a dotted.
Possiamo poi utilizzare un’unica dimensione del bordo per tutti e quattro i lati ed avere un effetto come il seguente:
Il codice necessario in questo caso è il seguente:
.arrow-multicolor {
border-color: red green blue orange;
border-style:solid;
border-width:20px;
width:0;
height:0;
}
Anche in questo caso, modificando lo stile del bordo, si possono realizzare forme molto carine la cui utilità è piuttosto dubbia ma che con un pò di creatività possono essere utilizzate. Questi ultimi esempi sono stati realizzando modificando l’attributo border-style.
Via | Jon Rohan
Benvenuto! Mi chiamo
January 8, 2010 at 1:19 am
Che spettacolo, questa la voglio provare subito domattina appena arrivo a lavoro. Grazie
January 8, 2010 at 9:44 am
Ciao Michele,
ho avuto anche io la stessa reazione quando ho letto l’articolo!
January 12, 2010 at 11:20 am
Bellissimo.
Da provare immediatamente.
Grazie della dritta Simone, ciao.
January 12, 2010 at 11:24 am
Figurati!
Benvenuto sul blog giapox!