疑似要素のみを使用して CSS のみのウィザードでアクティブ ページ間に矢印を作成するにはどうすればよいですか?

CSS のみで矢印を作成する

問題:

ウィザードのような注文プロセス、アクティブなページが緑色で強調表示されたメニューがあります。目標は、CSS のみを使用して、アクティブなページから次のページへ向かう矢印を作成することです。

解決策:

:before と :after Pseudo を使用する-Elements

複数の

を使用する代わりに画像では、CSS 疑似要素 (:before および :after) を利用して、DOM に余分な要素を追加せずに矢印を生成できます。このテクニックには、目的の境界線を持つ回転した正方形を作成し、それらを適切に配置することが含まれます。

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

アクティブ ページのスタイル設定

アクティブ ページに緑色の矢印を付けるには、次のスタイル:

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

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

このアプローチでは、間のスペースの単色を維持しながら、目的の矢印を作成します。

以上が疑似要素のみを使用して CSS のみのウィザードでアクティブ ページ間に矢印を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。