Comment puis-je créer des flèches entre des pages actives dans un assistant CSS uniquement en utilisant uniquement des pseudo-éléments ?

Création de flèches en CSS uniquement

Problème :

Dans un processus de commande de type assistant , il y a un menu avec les pages actives surlignées en vert. Le but est de créer une flèche pointant d'une page active à la suivante, en utilisant uniquement du CSS.

Solution :

Utiliser :before et :after Pseudo -Elements

Au lieu d'utiliser plusieurs

s et images, vous pouvez utiliser CSS pseudo-éléments (:before et :after) pour générer les flèches sans ajouter d'éléments supplémentaires au DOM. Cette technique consiste à créer des carrés pivotés avec les bordures souhaitées et à les positionner de manière appropriée.

#flowBoxes div {
  display: inline-block;
  position: relative;
  height: 25px;
  line-height: 25px;
  padding: 0 20px;
  border: 1px solid #ccc;
  margin-right: 2px;
}

#flowBoxes div.right:after {
  content: '';
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  width: 18px;
  height: 18px;
  position: absolute;
  right: 0;
  top: -1px;
  background-color: white;
  z-index: 150;
  transform: translate(10px, 4px) rotate(45deg);
}

#flowBoxes div.left:before {
  content: '';
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  width: 18px;
  height: 18px;
  position: absolute;
  left: 0;
  top: -1px;
  background-color: white;
  z-index: 50;
  transform: translate(-10px, 4px) rotate(45deg);
}

Styliser les pages actives

Pour donner aux pages actives la flèche verte, appliquez la styles suivants :

.active {
  background-color: green;
  color: white;
}

.active:after {
  background-color: green;
}

Cette approche crée les flèches souhaitées tout en préservant la couleur unie de l'espace entre elles.

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!

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