Code pour implémenter une simple icône de flèche en utilisant div+CSS en HTML

Dans la conception Web, nous utilisons souvent des flèches comme décoration pour embellir nos pages Web. Bien que de nombreux concepteurs de sites Web aiment désormais utiliser des icônes de police pour obtenir l'effet des flèches, cela aura également un certain impact sur le chargement des pages Web. Aujourd'hui, l'éditeur de Feiniao Muyu vous expliquera comment utiliser div et CSS pour obtenir certains effets de flèche dans la conception Web.

Dans certains menus de navigation secondaires ou listes avec fonctions déroulantes sur les pages Web, de petites flèches seront implémentées pour indiquer qu'un DIV contient du contenu. Alors, comment implémenter le style de ces petites flèches ?

Mettez d'abord le code CSS

 /*Flèche vers le haut*/.to_top { width: 0; height: 0; border-bottom: 10px solid #ccc; border-left: 10px solid transparent;}/*Flèche vers le bas*/ . to_bottom { width : 0 ; hauteur : 0 ; border-top : 10px solid #ccc ; border-left : 10px solid transparent ; 10px solid transparent;}/*flèche vers la gauche*/.to_left { width: 0; height: 0; border-right: 10px solid #ccc; border-top: 10px solid transparent; / *Flèche vers la droite*/ .to_right { width: 0; height: 0; border-left: 10px solid #cccf; transparent ; bordure inférieure : 10 px solide transparent ;}

Code HTML

 <p>Flèche vers le haut</p><div class=to_top></div><p>Flèche vers la gauche</p><div class=to_left></div><p>Flèche vers la droite</p><div class =to_right></div><p>Flèche vers le bas</p><div class=to_bottom></div>

Résultats de l'exécution du code

Si vous pensez que la flèche est trop grande ou trop petite et que la couleur n'est pas celle que vous souhaitez, nous pouvons ajuster la taille de la flèche en ajustant l'épaisseur et la couleur de la bordure DIV.

Hier, lors de la modification du thème à trois colonnes, certains utilisateurs ont signalé qu'une grande flèche gauche et droite devrait être ajoutée. Bien que ce soit très simple à mettre en œuvre (vous pouvez utiliser une image d'arrière-plan à la place), mais vous devez ajouter une fonction d'arrière-plan qui peut personnaliser la couleur, j'ai donc pensé à utiliser DIV+CSS pour dessiner des flèches, afin que vous puissiez facilement personnaliser le couleur des flèches.

Code CSS

 .text{ display : bloc en ligne ; border-top : 2px solid ; border-right : 2px solid ; largeur : 100px ; border-color : #EA6000 ; automatique 100px ;}

Code HTML

<span class=text></span>

Résultats de l'exécution du code

On peut changer le nombre de flèches en modifiant le code en dessous de C, ou on peut modifier la largeur et la hauteur pour changer la taille de la flèche.

transform: rotate(-135deg);/*调整旋转的角度*/

Ce qui précède est le code que l'éditeur vous présente pour utiliser div+CSS pour implémenter une simple icône de flèche en HTML. J'espère que cela vous sera utile. Si vous avez des questions, laissez-moi un message et l'éditeur vous répondra. à vous à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !

Si vous pensez que cet article vous est utile, n'hésitez pas à le réimprimer, veuillez indiquer la source, merci !