Les triangles en CSS

Par Lucho le . Catégorie(s) HTML/CSS

Les triangles en CSS

Here it is! Le premier tuto du site!

Hier, je suis tombé sur article très interessant de Chris Coyier qui expliquait comment faire des triangles uniquement en CSS. C’est très pratique pour éviter de charger des images.

L’idée est simple, tu fais un carré de 0 pixel auquel tu appliques des bordures assez larges, puis, tu masques les bordures qui ne t’intéressent pas.
De quoi? C’est du charabia? Bon ben on va prendre un petit exemple.

Prends une balise div seule :

 

Tu déclares la largeur et la hauteur de cette div à 0px puis tu lui met des grosses bordures :

 

Voici le résultat :

Bordures du carré

 

A partir de là, tu peut masquer les bordures qui ne t’interessent pas en leur donnant la couleur transparente. Ici, on va garder la flèche qui pointe vers la droite (donc border-left…) :

 

Ce qui nous donne ça :

Triangle css

 

Petite astuce : Tu peut aussi utiliser la notation raccourcie :

 

Super, j’ai mon triangle!

Et si je veut faire mon triangle à côté d’un lien, comment je fais?

C’est là que ça devient intéressant. En utilisant les pseudo-éléments, on va pouvoir ajouter des triangles sur toutes mes balises, faire des puces personnalisées sur des listes… C’est pas super ça?

Voici comment faire.

Tu vas créer ton lien :

 

Ce qui donne ça :

Lien simple

 

Avant d’ajouter le triangle, il te faut transformer le lien en inline-block et le positionner en relative car tu vas en avoir besoin au moment où tu voudras utiliser tes pseudo-éléments :

 

Ensuite, il ne reste plus qu’à ajouter le triangle à l’aide du pseudo-élément ::before et lui donner la couleur et la largeur souhaitée :

 

Voici ce que ça donne :

Lien hypertexte avec triangle en css

 

Tu peut ensuite faire mumuse et ajouter des ombres, des couleurs, des transitions, tout ce que le css permet (notamment la pseudo-classe :hover pour faire des évènements au survol de la souris). Tu peut voir un exemple d’application de cette technique dans la liste des mots-clefs au bas de cet article… Les petits triangles à gauche de chaque mot-clef est fait en css!

Cette technique est supportée par tous les navigateurs y compris Internet explorer depuis sa version 5 puisqu’elle n’utilise que le style border.

Pour le pseudo-élément ::before, il faut la version 8 de Internet Explorer.

Triangulez bien!

Mots-clefs :

Rétrolien depuis votre site.

A propos de l'auteur
Avatar de Lucho

Lucho

Passionné de création web, fan de Wordpress et mordu de Joomla... Technicien son et blogueur occasionnel. Auteur du blog "Les tutos de Lucho". Facebook - Twitter - Google+

Commentaires (5)

  • Avatar de Mars

    Mars

    |

    Salut.
    Je dis peut-être une énormité mais allez, je me lance. Pour faire apparaître (si on peut dire) une transparence sur tous les navigateurs, j’ai eu le problème une fois (c’était dans un dégradé) et je m’en suis tiré avec un rgba(XXX, XXX,XXX, 0) la couleur n’ayant pas d’importance puisqu’on veut pas la voir du tout (alpha réglé à 0)
    J’ai utilisé la bidouille du triangle en «négatif» (en faire disparaître un seul) pour faire des pointes de fanion au bout d’un titre.

    Répondre

  • Avatar de Geoffrey

    Geoffrey

    |

    Hello,
    Merci pour la mention d’un de mes article.
    Pour information il me semble que la valeur transparent n’est pas compatible IE6 et pose des problèmes avec IE7.

    Bonne continuation 🙂
    G.

    Répondre

    • Avatar de Lucho

      Lucho

      |

      Salut Geoffrey, apparemment, certains donnent une compatibilité avec IE4 et d’autres IE7… A tester.

      Répondre

Laisser un commentaire

La page Facebook

Google+

Mots clefs

Commentaires récents

Fred

|

Bonjour,

Merci pour le tuto clair et concis!

Bonne continuation!

hamza

|

salut loucho , je veux faire plusieurs langues sur le site WEBNODE aide moi stp

cordialement