[Webdesign] Ajouter un triangle simplement et sans image - Tutoriel pour Webmasters  

Accueil > Tutoriels pour Webmasters > [Webdesign] Ajouter un triangle simplement et sans image

[Webdesign] Ajouter un triangle simplement et sans image

Dans la conception d'un design web il est parfois nécessaire d'ajouter un triangle ou une flèche par endroit (exemple : devant des liens). Il est théoriquement possible d'ajouter une image pour faire ce triangle, mais ça ajoute une requête HTTP pour appeler l'image et le poids de nouvel élément est non-négligeable. Il existe 2 méthodes simples pour ajouter un triangle sans alourdir le poids de la page (donc pour garder de bonne performance pour l'affichage des pages).

Méthode en CSS

La première solution consiste à exploiter une astuce CSS compatible avec pratiquement tous les navigateurs web (même les plus vieux). Pour comprendre cette astuce, il faut voir comment sont créées les bordures en CSS. Prenons cet exemple basique pour ajouter une grosses bordure à un <div>:

Cadre à grosses bordures

  1. .cadre1{
  2. width:80px; /* mettre une largeur de 80px au cadre */
  3. border-top:20px solid red; /* bordure du haut de 20px en rouge */
  4. border-right:20px solid green; /* bordure de droite de 20px en vert */
  5. border-bottom:20px solid blue; /* bordure du bas de 20px en bleu */
  6. border-left:20px solid purple; /* bordure de gauche de 20px en violet */
  7. }

Ce petit bout de code ressemble à ceci :

Astuce CSS du triangle avec les bordures

Faire un carré avec les bordures

En utilisant le même code mais en mettant une largeur nulle, le cadre se transforme en carré. Déjà on voit apparaître 4 triangles.

  1. .cadre2{
  2. width:0px;
  3. border-top:20px solid red;
  4. border-right:20px solid green;
  5. border-bottom:20px solid blue;
  6. border-left:20px solid purple;
  7. }

Le code fait apparaître ceci :

Astuce CSS du triangle avec les bordures width:0

Faire une flèche avec une bordure

Il suffit alors d'utiliser la couleur "transparent" sur tous les triangles et de n'en laisser plus qu'un avec une couleur.

  1. .cadre3{
  2. width:0px;
  3. border:20px solid transparent;
  4. border-left:20px solid purple;
  5. }

Avec ce simple code, on voit seulement un triangle violet qui ressemble à une flèche :

Astuce CSS du triangle avec les bordures flèche droite

Jouer avec les bordures pour de nouvelles formes

Il est possible de combiner plusieurs solutions pour créer de nouvelles formes. Par exemple, pour faire une flèche en diagonale, il suffit de laisser la bordure du haut et la bordure de droite.

  1. .cadre4{
  2. width:0px;
  3. border:20px solid transparent;
  4. border-top:20px solid red;
  5. border-right:20px solid red;
  6. }

Ce code va donner cet aperçu :

Astuce CSS du triangle avec les bordures flèche en haut à droite

Cette solution permet de créer des formes assez grosses sans avoir à télécharger d'images. Il ne reste plus qu'à expérimenté pour en faire ce que vous voulez.

Utilisation de caractères spéciaux

Une solution encore plus simple consiste à utiliser les caractères spéciaux. Il existe déjà des codes ASCII pour créer des triangles. Voici une liste des triangles disponibles avec leur code équivalent pour les utiliser sur un site web :

Symboles Code ASCII Unicode Description
▲ ▲ Flèche vers le haut
▴ ▴ Flèche vers le haut
▶ ▶ Flèche vers la droite
▸ ▸ Flèche vers la droite
► ► Flèche vers la droite
▼ ▼ Flèche vers le bas
▾ ▾ Flèche vers le bas
◀ ◀ Flèche vers la gauche
◂ ◂ Flèche vers la gauche
◄ ◄ Flèche vers la gauche

Il est possible d'afficher un tel caractère dans la taille souhaitée et de lui appliquer une couleur au choix pour en faire ce que vous souhaitez. Cette solution est elle aussi beaucoup plus légère que d'utiliser une image pour afficher un simple triangle.