改变css的方向'；之字形'；边境

我正在尝试使用css中的线性渐变创建一个之字形边框。我有“顶部”边界工作，但我似乎无法让底部边界工作。底部是在纯色部分和带有背景图像的部分之间。我可以让底部的一个工作，如果它是一个纯色的部分，但图像背景似乎是什么难住了我

HTML:

---

基本上，当它位于底部时，您正在绘制白色三角形。更多信息请点击此处：

---

您与之字形车顶非常接近。对于锯齿形底部，如果您只需从#DDD切换到白色

 background: linear-gradient(45deg, white 10px, transparent 0), linear-gradient(-45deg, white 10px, transparent 0);

---

并且绝对地将锯齿形底部定位在图像顶部，您应该能够实现您想要的效果。

基本上，您需要将渐变角度更改180度，将背景位置设置为顶部，并将伪元素放置在边界上

.zigzag-bottom:after {
    background: linear-gradient(135deg, red 16px, transparent 0), linear-gradient(225deg, blue 16px, transparent 0);
    background-position: left top;
    top: 100%;
}

我已经将渐变设置为蓝色和红色，以便您可以看到什么是什么。将此颜色更改为背景色，即可完成此操作

---

你试过这个吗？问题是它需要与图像重叠。我想看看是否有一种方法可以把三角形倒过来画。

.zigzag-bottom {
    position: relative;
    padding: 8px 8px 32px 8px;
    background: #ddd;
}
.zigzag-bottom:after {
    background: linear-gradient(-45deg, #ffffff 16px, transparent 0), linear-gradient(45deg, #ffffff 16px, transparent 0);
    background-position: left-bottom;
    background-repeat: repeat-x;
    background-size: 32px 32px;
    content: " ";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 32px;
}

 background: linear-gradient(45deg, white 10px, transparent 0), linear-gradient(-45deg, white 10px, transparent 0);

.zigzag-bottom:after {
    background: linear-gradient(135deg, red 16px, transparent 0), linear-gradient(225deg, blue 16px, transparent 0);
    background-position: left top;
    top: 100%;
}