带有CSS

Question

这种背景边框是否可以使用CSS绘制？我看到很多45％锯齿状边缘的例子，但没有用这些较小的角度画出来的。我怀疑它可以做到，但是还没有能够解决它。

如果可以的话，我会感激一点帮助。

编辑：这是我开始玩的一些代码和一个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“背景图像”。您可以在Adobe Illustrator或Sketch等矢量绘图程序中创建所述背景图像，然后将其包含在CSS样式表中。