Comment dessiner une double flèche avec du CSS pur (exemple de code)

Cet article vous présentera comment dessiner un effet double flèche en utilisant du CSS pur. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

1. Appelez une seule flèche plusieurs fois

Après avoir réalisé une seule flèche~~, il est facile de réaliser une double flèche. Deux principes pour réaliser une seule flèche ont été introduits ci-dessus : la méthode de rotation du cadre et la méthode de couverture du double triangle. Cette fois, nous prenons la rotation des bordures comme exemple et l'appelons plusieurs fois pour implémenter des doubles flèches.

1. Rotation du cadre avec une seule flèche pour obtenir

.arrow-right{
  height: 120px;
  width: 30px;
  display :inline-block;
  position: relative;
}
.arrow-right::after {
  content: "";
  height: 60px;
  width: 60px;
  top: 12px;
  border-width: 8px 8px 0 0;
  border-color: blue;
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
}

Le rendu est le suivant :

2. >

<div>
	<span class="arrow-right"/>
    <span class="arrow-right"/>
</div>

plusieurs fois

Le rendu est le suivant :

2. Dessinez directement des doubles flèches

Auparavant, une seule flèche était dessinée via le pseudo-élément ::after, et maintenant ajoutez le pseudo-élément ::before et dessinez une seule flèche pour réaliser le dessin d'une double flèche en utilisant du CSS pur.

.arrow-right{
  height: 120px;
  width: 30px;
  display :inline-block;
  position: relative;
}
.arrow-right::before {
  content: "";
  height: 60px;
  width: 60px;
  top: 12px;
  left: 30px;
  border-width: 8px 8px 0 0;
  border-color: blue;
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
}
.arrow-right::after {
  content: "";
  height: 60px;
  width: 60px;
  top: 12px;
  border-width: 8px 8px 0 0;
  border-color: blue;
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
}

Le rendu est le suivant :

La méthode de superposition de double triangle peut également dessiner directement des doubles flèches, mais la mise en œuvre est plus gênante, et elle n'est pas aussi simple à mettre en œuvre que la méthode de rotation des frontières, donc je n'entrerai pas dans les détails.

Pour plus de connaissances liées à la programmation, veuillez visiter :

Enseignement de la programmation ! !

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!