Maison > Article > interface Web > Comment créer un symbole de flèche en utilisant CSS
Comment créer un symbole de flèche en utilisant CSS
- 不言original
- 2018-12-08 10:45:517234parcourir
Nous pouvons souvent voir des symboles fléchés, alors comment pouvons-nous utiliser CSS pour créer des symboles fléchés sans utiliser d'images ? Cet article vous présentera comment créer des symboles fléchés avec CSS.
Pas grand chose à dire, passons directement au texte~
Comment faire des icônes de flèches avec CSS
Vous pouvez créer des flèches simplement en utilisant CSS sans utiliser d'images
Tout d'abord, voyons comment implémenter une flèche, je vais créer une flèche en forme de L du coin supérieur gauche au coin inférieur droit.
Une flèche tournant à angle droit.
Le code est le suivant
Code HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS arrow</title> <link rel="stylesheet" type="text/css" href="sample.css"> <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> </head> <body> <div class="arrow"></div> </body> </html>
Code CSS
sample.css
.arrow{
position: relative;
width: 200px;
height: 50px;
border-top: 8px solid #5bc0de;
border-right: 8px solid #5bc0de;
box-sizing: border-box;
}
.arrow::after{
content: "";
position: absolute;
bottom: -14px;
right: -17px;
border-top: 14px solid #5bc0de;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
}Le résultat de l'exécution
affiche l'effet suivant sur le navigateur
Les codes HTML pour créer plusieurs symboles fléchés introduits ensuite sont les mêmes que ci-dessus .Nous utilisons principalement Modifier le code CSS pour implémenter
flèche triangulaire
Code CSS
.arrow{
position: relative;
display: inline-block;
padding: 0 0 0 16px;
color: #000;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
}
.arrow::before{
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
box-sizing: border-box;
width: 12px;
height: 12px;
border: 1px solid #ff0000;
-webkit-border-radius: 25%;
border-radius: 25%;
}
.arrow::after{
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
left: 5px;
box-sizing: border-box;
width: 3px;
height: 3px;
border: 3px solid transparent;
border-left: 3px solid #ff0000;
}L'effet de course est le suivant
.affichera une icône de groupe avec un triangle rouge
Flèche avec "signe supérieur à"
Code CSS
.arrow{
position: relative;
display: inline-block;
padding-left: 20px;
}
.arrow::before{
content: '';
width: 6px;
height: 6px;
border: 0px;
border-top: solid 2px #5bc0de;
border-right: solid 2px #5bc0de;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 50%;
left: 0;
margin-top: -4px;
}
Le résultat de l'exécution
L'effet d'exécution sur le navigateur est le suivant
Ce symbole de flèche est souvent utilisé sur les pages Web
Créer une flèche vers le haut
Code CSS
.arrow{
width: 0px;
border-color: #d9534f;
border-style: solid;
border-width: 30px;
border-left-color: transparent;
border-top-color: transparent;
border-right-color: transparent;
}Exécuter l'effet
Afficher l'effet suivant sur le navigateur
Enfin, jetons un coup d'œil au traditionnel symbole de flèche droite
Code CSS
.arrow {
display:inline-block;
height:40px;
width:80px;
background-color:#5bc0de;
position:relative;
top:40px;
}
.arrow:before {
position:absolute;
content:"";
width:0;
height:0;
border:60px solid transparent;
border-left:60px solid #5bc0de;
left:80px;
top:-37px;
} Le résultat en cours d'exécution
sera affiché sur le navigateur comme indiqué ci-dessous
Cet article se termine ici. Pour plus de contenu passionnant, vous pouvez accéder à la colonne Tutoriel vidéo CSS du site Web php chinois pour une étude plus approfondie ! ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!