Html 如何获得工作CSS之字形边框？

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

正文{
保证金：0；
填充：0；
}
#丝带{
背景：白烟；
}
#丝带ul{
保证金：0；
填充：0；
高度：100px；
显示器：flex；
列表样式类型：无；
}
#李玉玲{
显示器：flex；
柔性生长：1；
对齐项目：居中；
证明内容：中心；
光标：指针；
}
#ribbon ul li:不是（：最后一个孩子）{
右边界：实心；
}
#带状，v字形{
背景：线性梯度（135度，透明，透明75%，#b6b5eb 75%，#b6b5eb），线性梯度（225度，透明，透明75%，#b6b5eb 75%，#b6b5eb），线性梯度（45度，透明，透明75%，#b6b5eb 75%，#b6b5eb），线性梯度（315度，透明，透明75%，#b6b5eb 75%，#B5EB）；
背景位置：右上角；
背景重复：重复-y；
背景尺寸：10px 10px；
}

模式1
模式2
模式3
模式4

示例代码使用SVG图像，它们被编码到CSS中更新：不，没有，抱歉。但我仍然认为这是最好的解决办法

它使用两种之字形图案：一种是水平的，另一种是垂直的。然后用不透明元素覆盖除边界之外的所有内容

当你改变背景对齐方式时，图案就不起作用了，你会得到这些钻石。你可以想出一个不同的模式。。。或者只盖上左边的部分

删除：before，因为它用于水平线

将：after移动到左边距，并调整其宽度以仅显示一个条

.边界：之后{ ... 左：0； 宽度：26em

替代解决方案（我使用您当前的标记提出了一个更好的解决方案）：

说明：

锯齿形不是边界，它实际上是.v-zigzag的背景。它也不是一条线，它在左侧是平的，在右侧是锯齿形的

然后我们在顶部使用其他背景，像第一个，但是是白色的，我们把它放在右边3倍，用白色之字形覆盖第一个背景的大部分。这样，产生的之字形线实际上是背景中唯一“可见”（没有覆盖白色）的部分

---

我们没有使用嵌套的div，而是使用了：before选择器。将属性内容（即使是空字符串）设置为元素的：before或：after，将创建一个“something”它的行为与任何其他元素一样，一个实际上不在DOM中的元素，但它的行为是这样的。这个伪元素是一个白色之字形的元素，在灰色背景上浮动。

我以前有过类似的东西，但我试图找到一种不使用不同颜色div的方法。CSS中的SVG我没有看到了吗？很抱歉，SVG是由SCSS生成的，我看到CSS被编译。无论如何，示例代码使用了类似的方法，它不是透明的，也不可能是透明的。用更多细节更新答案。非常棒。你介意提供一个关于你的解决方案如何工作的简短解释吗？在答案中添加了解释。你的pr是什么问题？我在你的密码笔里看到一个很好的垂直之字形。。。

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