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应用最后出现的代码。

Answer 2

下面：

.box {
    transform: rotate(45deg);
    /* add all applicable vendor prefixes here */
}