CSS transform свойство compatiblity

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

Здесь :

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

Answer 2

Вы используете различные функции преобразования (skew и rotate) для предварительно установленных и без префикса кода Используйте ту же функцию, с. только префикс как разница. Кроме того, рекомендуется писать строку без префикса после префикса, поскольку современные браузеры могут иметь как стабильные (предпочтительные), так и экспериментальные реализации, а CSS применяет код, который приходит последним.