[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 :
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.