如何在纯 CSS 向导中仅使用伪元素在活动页面之间创建箭头？

仅在 CSS 中创建箭头

问题：

在类似向导的订购过程中，有一个菜单，其中活动页面以绿色突出显示。目标是仅使用 CSS 创建一个从一个活动页面指向下一个活动页面的箭头。

解决方案：

使用 :before 和 :after 伪-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中文网其他相关文章！