Maison > interface Web > tutoriel CSS > le corps du texte

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

青灯夜游
Libérer: 2021-05-21 09:30:29
avant
2555 Les gens l'ont consulté

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.

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

(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;
}
Copier après la connexion

Le rendu est le suivant :
Comment dessiner une double flèche avec du CSS pur (exemple de code)
2. >

<div>
	<span class="arrow-right"/>
    <span class="arrow-right"/>
</div>
Copier après la connexion
plusieurs fois

Le rendu est le suivant :


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

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;
}
Copier après la connexion
Le rendu est le suivant :


Comment dessiner une double flèche avec du CSS pur (exemple de code) 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!

Étiquettes associées:
css
source:csdn.net
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal