html - 完全灵活的 html/css“透明”导航箭头（参见示例）

Question

我正在尝试做的示例...

所以，我的老板真的很喜欢我在这个演示页面（上图）中构建的向导导航风格。但是，当我构建它时，该方法有些静态。我的意思是，它不能很好地扩展到 5 或 6 或 10 个向导步骤。但是，我需要让它自然地扩展到这些步骤。

我可以就如何修改 css 代码以使其更灵活地工作得到一些建议吗？我花了几个小时玩弄它，结果并不令人满意。

Answer 1

可以使用borders 和伪元素：

.selected:before, .selected:after {
  position: absolute;
  top: 0;
  content: "";
  border-top: 20px solid rgba(0, 0, 0, 0.5);
  border-bottom: 20px solid rgba(0, 0, 0, 0.5);
  border-left: none;
  border-right: 20px solid transparent;
}
.selected:before {
  left: 0;
}
.selected:after {
  right: 0;
  border-right: none;
  border-left: 20px solid transparent;
}

演示（在 Chrome 和 Firefox 中测试）

您会注意到我在示例中使用了 SASS。这样，如果您有3 个或12个变量，您只需在一个位置更改一个变量$wizard-steps（如果它需要是动态的，这也可以用 Javascript 来完成。