Question

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

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

你与zigzag-top非常接近。对于zigzag-bottom，如果只是从#DDD切换到白色，

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

并且将曲折底部绝对放置在图像顶部，您应该能够实现您想要的效果。

Answer 2

基本上，当你在底部时，你会画出白色三角形。更多信息：https://localmotors.com/blog/post/zig-zag-borders-in-css/1205/

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

https://jsfiddle.net/droo46/6a10moz1/

改变css'zigzag'边界的方向

2 个答案: