如何制作 CSS 之字形边框？ [复制]

【问题标题】：How to make CSS zig-zag borders? [duplicate]如何制作 CSS 之字形边框？ [复制]
【发布时间】：2016-07-13 22:06:10
【问题描述】：

我试图在我的标题元素的基线上获得这种效果。

最好的方法是什么？没有图像（可能是 SVG）有什么办法吗？

我认为可以很好地完成此操作的一种方法是在绝对定位的伪元素上使用白色正方形的 repeat-x 背景图像。但是，它使用图像，我希望能够避免这种情况。

【问题讨论】：

看看这篇文章 - 看起来他们在那里解决了它stackoverflow.com/questions/13774952/…

标签： html css svg

【解决方案1】：

这是解决方案。它被称为之字形边界。

http://jsfiddle.net/justinmc/QqnD3/

<div class="container">
    <h1>Content Here</h1>
</div>

.container {
    position: relative;
    padding: 8px 8px 32px 8px;
    background: #dddccf;
}

.container: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://cocreate.localmotors.com/blog/post/zig-zag-borders-in-css/1205/

【讨论】：