CSS gagne des pouvoirs avec l'évolution web récente. Et c'est très intelligent avec des tours qui étaient longtemps existants ou qui ont émergé. Peut-être des astuces partagées ici vous apprendront avec des astuces CSS des profondeurs que vous n'étiez pas encore à explorer. Allons plonger.
Il peut être un overkill pour charger des images dans les cas où vous avez besoin de triangles simples, par exemple en ajoutant un pointeur flèche à un tooltip.
En utilisant seulement CSS, vous pouvez créer un triangle utilisant des frontières. C'est un vieux truc. Idéalement, sur un élément avec largeur et hauteur zéro, vous y mettez des bordures. Toutes les couleurs frontalières sont transparentes sauf celle qui formera une flèche. Pour créer une flèche pointant vers le haut, par exemple, la bordure inférieure est colorée tandis que la gauche et la droite sont transparentes. Pas besoin d'inclure la frontière supérieure. La largeur de la bordure détermine la taille de la flèche:
.upwards-arrow { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid crimson; }
Cela crée une flèche pointant vers le haut comme indiqué ci-dessous:
Vous pouvez voir ce codepen qui visualise le concept s'il est difficile de créer une image mentale.
z-index
propriété arrange comment un élément est empilé sur d'autres éléments positionnés. Parfois, vous pouvez définir
z-index
propriété sur un élément enfant à être plus bas et il finit par se cacher derrière le fond de son parent. Pour éviter cela, vous pouvez créer un nouveau contexte d'empilage sur l'élément parent pour empêcher les éléments enfants d'aller derrière. Une façon de créer un contexte d'...
[Courte citation de 8% de l'article original]