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

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

Mary-Kate Olsen

Libérer： 2024-12-14 21:29:14

original

431 Les gens l'ont consulté

How Can I Create Arrows Between Active Pages in a CSS-Only Wizard Using Only Pseudo-elements?

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

Copier après la connexion

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

Copier après la connexion

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!