css - 更改 css 'zigzag' 边框的方向

Question

我正在尝试在 css 中使用线性渐变创建锯齿形边框。我有“顶部”边框工作，但我似乎无法让底部边框工作。底部的位于纯色部分和带有背景图像的部分之间。如果它是一个纯色部分，我可以让底部的部分工作，但图像背景似乎让我感到困惑。

HTML:

<div class="zigzag-top"></div>
<section class="one"></section>
<div class="zigzag-bottom"></div>
<section class="two"></section>

CSS:

.zigzag-top {
    background: linear-gradient(45deg, #DDD 10px, transparent 0), linear-gradient(-45deg, #DDD 10px, transparent 0);
    background-position: left-top;
    background-repeat: repeat-x;
    background-size: 30px 20px;
    content:" ";
    left: 0px;
    width: 100%;
    height: 20px;
}

And here's a JSFiddle of the code

Answer 1

基本上，你需要将渐变的 Angular 改变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%;
}

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

fiddle