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:517303parcourir

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

Comment créer un symbole de flèche en utilisant CSS

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

Comment créer un symbole de flèche en utilisant CSS

Flèche avec "signe supérieur à"

Code CSS

.arrow{
  position: relative;
  display: inline-block;
  padding-left: 20px;
}

.arrow::before{
  content: &#39;&#39;;
  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

Comment créer un symbole de flèche en utilisant CSS

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

Comment créer un symbole de flèche en utilisant CSS

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

Comment créer un symbole de flèche en utilisant CSS

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!

php css html

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment personnaliser le style de la barre de défilement en CSS3Article suivant：Comment personnaliser le style de la barre de défilement en CSS3

Articles Liés

Voir plus