la création de triangles en CSS, sans images
Posté le 06 août 2013 | Rangé dans Tutoriaux
Le HTML comme le CSS ne nous permettent pas de faire des formes autre que le rectangle (je rappelle qu’un carré est un rectangle particulier). Seulement il est tout à fait possible de faire un triangle sans avoir besoin de créer une image à l’aide des bordures en CSS. La technique est simple : créer un bloc faisant 0 pixels de haut sur 0 pixels de large, et de jouer avec les bordures. On va devoir utiliser une bordure de couleur et des bordures transparentes, en utilisant la propriété CSS border-color :transparent; ! Comme la bordure en CSS est gérée par les navigateurs à l’extérieur du bloc et, lors d’une épaisseur importante, biaise les angles, nous allons pouvoir créer un triangle très simplement.
La technique est simple : la seule chose à retenir c’est que la bordure CSS pour la réalisation d’un triangle se fera toujours du coté opposé à la direction souhaitée. Du coup, si je souhaite faire un triangle pointant vers la droite, il faudra alors mettre une couleur de bordure à gauche. Idem pour les autres sens où l’on prendra toujours l’opposé.
Voici le code CSS à créer :
.flechedroite {
width : 0;
height : 0;
border-bottom : 5px solid transparent;
border-top : 5px solid transparent;
border-left : 5px solid #2f2f2f;
font-size: 0;
line-height: 0;
}
J’ai rajouté font-size et line-height à 0 afin d’éviter des incompatibilités sur différents navigateurs qui pourraient prendre en compte le fait qu’une div comporte un élément texte et fausse alors l’affichage de notre triangle CSS
Voyez, c’est tout simple !
Jacques Danilo
www.pixelcrea.com
Graphiste indépendant depuis 17 ans, photographe et formateur freelance dans le Grand-Ouest. Passionné par le web et les nouvelles technologies, blogueur et entrepreneur, je suis à votre disposition :
Jf studio a commenté :
C'est compatible toutes versions cette technique au moins ? Tu n'en parles pas... Ie6 et Ie7 ?
Elise WithDesigners a commenté :
Une technique intéressante que je ne connaissais pas, je suis sur qu’elle en intéressera plus d’un graphiste mais effectivement reste à voir si elle est utilisable sur toutes les versions.
cycy a commenté :
Je ne connaissais pas la technique, merci pour l'article. J'utilise d'habitude des caractères unicode pour obtenir des triangles : ◄ ►
Thom a commenté :
Avec les pseudo-elements aussi tu peux le faire