Astuce Webdesign, faire des fleches ou triangles en CSS

Tiens ça fait longtemps que j’ai pas parlé de Web et encore moins de Webdesign et comme là j’étais en train d’utiliser une astuce bien sympathique qui marche pour Firefox, Chrome, Opera, Safari et IE à partir du 6, je me suis donc dit « et si je la partageais » !

Sommaire

Il vous est probablement arrivé de devoir faire des petites flèches de navigation ou encore des triangles avant un titre (entre autre). La plupart du temps on se retrouve à faire une ou des images voir même un sprite pour avoir un effet hover.

Et bien je dis Stop, grâce au CSS tout ça c’est fini !

Un triangle en CSS

Dans un premier temps il vous suffit de définir un span (il est rigoureusement interdit de laisser un span vide c’est pourquoi je vous conseille d ‘y mettre un «   », espace en html) pour y mettre votre triangle et d’y ajouter une classe.

<span class="triangle">&nbsp;</span>

Ensuite, rendez-vous dans votre feuille de style et attribuer à ce span les propriétés suivantes :

.triangle {display:block;width: 0; height: 0; border: 25px solid #3074B8; border-top-color: transparent; border-left-color: transparent; border-bottom-color: transparent;}

Le résultat :

Pour changer l’orientation ? Rien de plus simple, vous avez remarquez que le style border-top-color contient top indication de position du border et bien il suffit de passer en transparent tous sauf celui qui vous intéresse. Pour changer la couleur il n’y a qu’a changer le #3074B8 par un autre code couleur.

Des flèches de navigation en CSS

Dans un premier temps il vous suffit une fois de plus de définir non pas un mais deux span (avec leur «   ») pour y mettre vos flèches et d’y ajouter une classe.

<span class="arrowNav arrowPrev">&nbsp;</span>
<span class="arrowNav arrowNext">&nbsp;</span>

Et de joindre le style css suivant.

.arrowNav {float:left; width: 0; height: 0; border: 25px solid #3074B8; cursor: pointer;}
.arrowNav.arrowPrev {border-top-color: transparent; border-left-color: transparent; border-bottom-color: transparent; margin-right: 5px;}
.arrowNav.arrowNext {border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent;}
.arrowNav.arrowPrev:hover {border-right-color: #639AC6;}
.arrowNav.arrowNext:hover {border-left-color: #639AC6;}

La classe arrowNav définit les styles communs au deux, quand au reste ça représente la position du triangle et le hover. Besoin de changer l’orientation ? c’est la même chose que l’exemple précédent !

Le résultat :

Conclusion

Une manière simple et propre de faire sa navigation ! Et surtout un gain de temps et une optimisation pour votre site internet.
Des questions et/ou demandes de précisions ? N’hésitez pas à laisser un commentaire.

Dans le même genre

• 8 août 2011 — PHPStorm