Flèches triangulaires CSS
Salut,
Je ne sais pas si ça a déjà été ajouté, mais je viens de m'amuser à créer des flèches en CSS.
Le gros avantage non négligeable est l'économie de requêtes HTTP par rapport aux flèches en images.
Le code :
Code:
1 2 3 4
| <span id="s1"></span>
<span id="s2"></span>
<span id="s3"></span>
<span id="s4"></span> |
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
| body {
background : #fff;
}
span {
border-color : #fff;
border-style : solid;
height : 0;
overflow : hidden;
display : inline-block;
margin : 20px;
clear : both;
}
#s1 {
border-top-width : 7px;
border-bottom-width : 7px;
border-left-width : 10px;
border-left-color : #abc;
}
#s2 {
border-left-width : 7px;
border-right-width : 7px;
border-top-width : 10px;
border-top-color : #abc;
}
#s3 {
border-top-width : 7px;
border-bottom-width : 7px;
border-right-width : 10px;
border-right-color : #abc;
}
#s4 {
border-left-width : 7px;
border-right-width : 7px;
border-bottom-width : 10px;
border-bottom-color : #abc;
} |
Le résultat est visible à cette adresse :
http://josselin.willette.free.fr/cod...s/fleches-css/