[Résolu] Triangle

Bonjour à tous
Je dois mettre ceci comme trigger d'évènements dans une page HTML.
A part mettre cette image en background-image, voyez vous un moyen de le faire en CSS pur?
Cela présenterait par exemple l'intérêt de pouvoir facilement changer la couleur sans avoir un jeu d'images.
J'ai essayé de mettre le caractère ▼ dans une div avec une bordure, mais quid du cadre pour que le caractère soit centré en hauteur ?
J'obtiens ce qui n'est pas satisfaisant.
Modifié par PapyJP (09 Sep 2019 - 12:16)

Bonjour,

version compliquée pour un simple triangle mais qui permet de se créer son ensemble d'icônes (dont checkbox et radio personnalisés) :
de plus en plus on utilise un SVG, en sprite (méthode <symbol> / <use>) ou plutôt ici un SVG directement écrit dans la CSS comme image de fond (exemple de KNACSS / démo).
Il faut un passage par la case optimisation (SVGOMG est assez parfait) et encodage (pour les 7 chercher-remplacer à faire, je me suis créé ce script utilisant sed, simple à utiliser en environnement node vu que j'utilise Git Bash mais j'espère qu'il existe des outils en ligne faisant cela…).
C'est plus pratique avec un·e collègue designer encore que pour un triangle, doit y avoir des outils de dessin SVG en ligne sans avoir recours à Gimp ou si on a dû éplucher les pages SVG de MDN, on peut tenter de l'écrire à la main (merci au jeu CSS Battle 1ère version )

version "simple" :
Sinon un triangle en CSS, ça peut se faire facilement avec un ::before / ::after et une bordure dont 3 des bords sont transparents et le 4e est le triangle (avec hauteur et largeur nulles, épaisseur de bordure = largeur de la base et de mémoire le double de la hauteur du triangle ou l'inverse hauteur du triangle et moitié de la base, bref ça se retrouve par essai / erreur
Variante triangle "en coin" (pointant vers un sommet, à 45°) : 2 bords transparents et 2 bords de la couleur du triangle.

Ressources :
- http://www.bellami.fr/triangles-css
- https://css-tricks.com/snippets/css/css-triangle/
- Générateur https://outils-css.aliasdmc.fr/generateur-de-triangles-css.php
Modifié par Felipe (10 Sep 2019 - 12:24)

Whaou!
Je ne pensais pas à des solutions mettant en œuvre tant de compétences!
Je vais regarder cela de près.

Merci, c'est exactement ça que je cherchais.