Comment créer un symbole de flèche en utilisant CSS-tutoriel CSS-php.cn

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

不言

Libérer： 2018-12-08 10:45:51

original

7358 Les gens l'ont consulté

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.

Comment créer un symbole de flèche en utilisant 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>

Copier après la connexion

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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!