html - 如何获得有效的CSS之字形边框？

我试图使一个CSS之字形垂直边界。我一直在看这个Codepen作为参考。我的尝试只是制造钻石，我一直在玩它，但似乎无法让它发挥作用。这是我的Codepen。

body {
  margin: 0;
  padding: 0;
}
#ribbon {
  background: whitesmoke;
}
#ribbon ul {
  margin: 0;
  padding: 0;
  height: 100px;
  display: flex;
  list-style-type: none;
}
#ribbon ul li {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#ribbon ul li:not(:last-child) {
  border-right: solid;
}
#ribbon .v-zigzag {
  background: linear-gradient(135deg, transparent, transparent 75%, #b6b5eb 75%, #b6b5eb), linear-gradient(225deg, transparent, transparent 75%, #b6b5eb 75%, #b6b5eb), linear-gradient(45deg, transparent, transparent 75%, #b6b5eb 75%, #b6b5eb), linear-gradient(315deg, transparent, transparent 75%, #b6b5eb 75%, #b6b5eb);
  background-position: right top;
  background-repeat: repeat-y;
  background-size: 10px 10px;
}

<section id="ribbon">
  <ul>
    <li class="v-zigzag">Mode 1</li>
    <li>Mode 2</li>
    <li>Mode 3</li>
    <li>Mode 4</li>
  </ul>
</section>

最佳答案

示例代码使用SVG图像，它们被编码到CSS中。更新：不，不，对不起。但我仍然认为这是最好的解决办法。
它使用两种锯齿形图案：一种是水平的，另一种是垂直的。然后它就用一个不透明的元素覆盖除了边界之外的所有东西。
当你改变背景的排列方式时，图案就不起作用了，你就会得到这些钻石。你可以想一个不同的模式。。。或者盖上左边。
删除：before，因为它用于水平线
将：移到左边距并调整其宽度以仅显示一条
。边界：之后{
...
左：0；
宽度：26em；
另一种解决方案（我使用您当前的标记想出了一个更好的解决方案）：

<li class="v-zigzag">Test</li></ul>

.v-zigzag {
     position: relative;
     background: linear-gradient(45deg, #ccc 5px, transparent 0) 0 5px, linear-gradient(135deg, #ccc 5px, #fff 0) 0 5px;
     background-position: right top;
     background-repeat: repeat-y;
     background-size: 10px 10px;
}
.v-zigzag:before {
    content:"";
    position: absolute;
    background: linear-gradient(45deg, #fff 5px, transparent 0) 0 5px,linear-gradient(135deg, #fff 5px, transparent 0) 0 5px;
    background-color: transparent;
    background-position: right top;
    background-repeat: repeat-y;
    background-size: 10px 10px;
    width: 10px;
    right: 3px;
    top: 0;
    bottom: 0;
 }

说明：
“之字形”不是边界，它实际上是.v-之字形的背景。它也不是一条直线，左边是平的，右边是曲折的。
然后我们在上面使用其他背景，像第一个但是白色的，我们把它放在右边3px，用白色之字形覆盖第一个背景的大部分。这样，产生的锯齿线实际上是背景中唯一“可见”（没有白色覆盖）的部分。
我们使用：before选择器代替嵌套div。属性内容（即使是空字符串）设置为元素的：before或：after，会创建一个“something”，其行为与任何其他元素一样，该元素实际上不在DOM中，但其行为是这样的。这个伪元素是白色之字形，漂浮在灰色背景上。