Des triangles en css

triangles cssIl n’existe aucune propriété permettant à un élément d’avoir une forme triangulaire. C’est pourquoi les intégrateurs avaient l’habitude d’utiliser une image en background pour former un triangle quand le design l’exigeait. Nous allons voir ensemble comment réussir à dessiner visuellement ce triangle uniquement grâce à CSS.

Une histoire de bordure

L’astuce permettant la création du triangle via CSS est l’utilisation de la propriété border. Quand nous appliquons une bordure de chaque côté d’un élément, l’intersection entre chaque bordure forme un angle à 45 degré. Observons cela de manière flagrante avec un boite possédant des bordures de 50px : alt : Demo Triangle CSS 1Le carré gris présent est la boîte en elle-même. Une bordure rouge de 50 pixels est appliquée à tous les côtés. Pour rendre les angles visibles, une couleur différente est attribuée à la bordure du haut, de droite et du bas : <!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
<meta charset="ISO-8859-1" />
<title>Demo 1 - Triangle CSS</title>
<style type="text/css">
body {margin: 0; padding: 10px;}
div {width: 100px; height: 100px; border: 50px solid red; border-top-color: pink; border-right-color: orange; border-bottom-color: purple; background: #ccc; cursor: pointer;}
</style>
</head>
<body>
<div></div>
</body>
</html>

Obtenir 4 triangles

Maintenant que nous avons observé cela, nous allons supprimer le carré gris en définissant une largeur et une hauteur nulle afin de ne laisser visible que les bordures. Nous obtenons alors 4 triangles :
alt : Demo Triangle CSS 2Le code source : <!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
<meta charset="ISO-8859-1" />
<title>Demo 2 - Triangle CSS</title>
<style type="text/css">
body {margin: 0; padding: 10px;}
div {width: 0; height: 0; border: 50px solid red; border-top-color: pink; border-right-color: orange; border-bottom-color: purple; cursor: pointer;}
</style>
</head>
<body>
<div></div>
</body>
</html>

Ne garder qu’un seul triangle

Notre objectif est d’afficher uniquement un seul triangle. Au lieu de définir une couleur sur trois des bordures, nous appliquons une transparence à celles que nous voulons cachées. Du coup, il ne nous reste plus qu’un seul triangle visible, les autres étant totalement transparent :
alt : Demo Triangle CSS 3Les triangles sont effacés grâce à la valeur tranparent :<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
<meta charset="ISO-8859-1" />
<title>Demo 3 - Triangle CSS</title>
<style type="text/css">
body {margin: 0; padding: 10px;}
div {width: 0; height: 0; border: 50px solid red; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; cursor: pointer;}
</style>
</head>
<body>
<div></div>
</body>
</html>

Vous pouvez évidemment choisir quels côtés doivent disparaître en fonction de l’orientation que vous voulez donner à votre triangle. De plus, vous pouvez jouer sur les valeurs border-width afin d’étendre plus ou moins votre triangle.

Attention à ne pas surcharger le DOM inutilement

L’inconvénient majeur de cette technique est que cela vous obligera dans la plupart des cas à rajouter un élément vide dans le code HTML de la page. En fonction du contexte, il conviendra d’utiliser une image en background plutôt que cette astuce. Cette image pourrait éventuellement être encodée en base64.
Edit : Il convient désormais de ne plus ajouter de span vide pour utiliser cette technique. Préférez l’utilisation des pseudos-éléments « before » et « after ».

Il est donc possible en jouant avec la propriété border d’obtenir des triangles en CSS. Vous pouvez observer un autre exemple avec les boutons d’ouvertures et de fermetures des bloc de la colonne de droite de ce blog.

Cette entrée a été publiée dans CSS, avec comme mot(s)-clef(s) , . Vous pouvez la mettre en favoris avec ce permalien.

4 commentaires pour Des triangles en css

  1. Ca me rappelle le truc pour faire des ronds en css3 avec border-radius. truc tout con aussi mais qui à plus vocation à acceuillir du contenir que des triangle ; on est d’accord sur la ‘pollution’ des élèments vides dans le html.

  2. Bellami

    div {border-radius: 50%}
    Pour les ronds, tu parles de cela ?

  3. Bonjour,

    C’est tout bête mais fallait y penser.

    Ce qui me fait penser d’ailleurs qu’on peut alléger le code CSS. En effet, dans ce tutoriel l’auteur part du principe de colorer tout les côtés puis d’effacer ceux qui ne l’intéressent pas.

    Mais retournons la choses à 180° et partons du principe de ne colorer que le côté qui nous intéresse.

    Ainsi pour une Flèche rouge vers le bas cela donnerait en CSS:
    DIV {WIDTH:0;WEIGHT:0;BORDER:10PX SOLID TRANSPARENT;BORDER-TOP-COLOR:RED;}.

    Il est vrai aussi que cette technique alourdit le DOM avec un élément vide. Si cette technique vous déplaît vous pouvez utiliser à la place l’élément CONTENT qui vous permettra d’insérer le caractère spécial ▲ et de lui appliquer une rotation.
    Il reste aussi possible d’insérer le caractère spécial cité ci-dessus directement dans la partie HTML et d’appliquer la rotation dans la partie CSS.
    Cette dernière pratique vous évite un élément du DOM qui soit vide et vous permettra aussi de centrer plus facilement votre flèche par rapport à son conteneur.

    Tout dépend de l’usage que vous en faîtes.

  4. Merci pour ce tuto, cependant, je souhaiterais ajouter une bordure à mon triangle de 1px avec une couleur.

    Dès que je met une couleur avec bordure, ça plante.

    Une idée ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>