CSS 变换属性兼容性

Question

我正在尝试创建像 / 这样的边框。我正在使用以下代码。它在 Firefox 中显示正常，但在 Chrome/Safari 中显示相反的方向(从顶部开始到右侧结束。我该如何解决？

.box {
    width: 100px;
    height: 100px;
    border-left: 1px solid;
    transform: skew(-45deg);
    -webkit-transform: rotate(-45deg);
    transform-origin: top left;
    -webkit-transform-origin: top left;
}

JSFiddle: http://jsfiddle.net/Lo3pjjrj/2/

Answer 1

您对有前缀和无前缀的代码使用不同的转换函数(skew 和 rotate)。使用相同的功能，只是前缀不同。此外，建议在带前缀的行之后编写无前缀行，因为现代浏览器可能同时具有稳定(首选)和实验性实现，而 CSS 应用最后的代码。