css - 带有 CSS 的略带锯齿的边框线

Question

这种背景边框边缘可以用CSS绘制吗？我看到很多 45% 锯齿状边缘的例子，但这些较小的 Angular 并没有画出任何东西。我怀疑它可以完成，但一直无法弄清楚。

如果可以完成，我将不胜感激。

编辑:这是我开始玩的一些代码和一个 jsfiddle。具有一般形状，但问题是边界线之间的间隙。

HTML

<div id="angle-border" class="clearfix">
    <div class="left-border"></div>
    <div class="left-center-border"></div>
    <div class="right-center-border"></div>
    <div class="right-border"></div>
</div>

CSS

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1; /* ie 6/7 */
}
#angle-border {
    width: 100%;
    margin-top: 20px;
}
.left-border {
    border: 1px solid black;
    width: 24%;
    float: left;
    transform: rotate(7deg);
    padding-right: 2px;
}
.left-center-border {
    border: 1px solid red;
    width: 24%;
    float: left;
    transform: rotate(-7deg);
    padding-left: 2px;
}
.right-center-border {
    border: 1px solid blue;
    width: 24%;
    float: left;
    transform: rotate(7deg);
}
.right-border {
    border: 1px solid green;
    width: 24%;
    float: left;
    transform: rotate(-7deg);
}

https://jsfiddle.net/BitBug/zodh07oc/

谢谢!

Answer 1

据我所知没有。作为替代方案，也许您可​​以将锯齿状边缘所属的背景制作成 CSS“背景图像”。您可以在 Adob​​e Illustrator 或 Sketch 等矢量绘图程序中创建所述背景图像，然后将其包含在您的 CSS 样式表中。