css - 使用变换后边框图像之间的间隙 : rotate

Question

我正在尝试创建一个带有锯齿状边缘的框，它实际上可以用作 HTML 元素，并且可以调整大小等。

我终于了解了 border-image，让它看起来不错，然后当我旋转它时，它在 border-image 和主要填充之间出现了一个空隙:

我用谷歌搜索了一下，找到了关于 SO 告诉某人设置的答案

-webkit-backface-visibility: hidden;

这清除了它，但显然只在 webkit 浏览器中。

我也尝试过使用 -moz-backface-visibility，但它并没有解决 Firefox 中的问题。

有什么建议吗？

jsFiddle

e:我实际上认为我可以通过设置背景颜色，然后将 background-clip 设置为 padding-box 来修复它，但老实说只是让我处于相同的位置。

Answer 1

解决 Webkit 和 FF 中问题的一个技巧是设置透视图(而不是背面可见性)

.box.one {
    -webkit-transform: perspective(999px) rotate(1deg);
    -moz-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    -o-transform: rotate(1deg);
    transform: perspective(999px) rotate(1deg);
}

fiddle