[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

span style="color: #808080; font-style: italic;">/* mettre une largeur de 80px au cadre *//* bordure du haut de 20px en rouge *//* bordure de droite de 20px en vert *//* bordure du bas de 20px en bleu *//* bordure de gauche de 20px en violet */
}

Ce petit bout de code ressemble à ceci :

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.

Le code fait apparaître ceci :

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.

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

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.

Ce code va donner cet aperçu :

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 :

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.