倾斜的框不能在Safari/iOS浏览器中工作

Question

我想制作一个倾斜的框（基本上由一个中心块元素组成，并且:: & ::在倾斜框元素之后）。问题是，我的倾斜的盒子在Chrome/Firefox中看起来很好，但正确的（::之后）倾斜的div似乎在Safari中不能正常工作。任何帮助，将不胜感激。

.slanted-box { 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 75px; 
 
    text-align: center; 
 
    margin: 0 auto 20px auto; 
 
    font-size: 16px; 
 
} 
 
.slanted-box p { 
 
    margin: 0; 
 
    padding: 0 15px; 
 
    line-height: 75px; 
 
    font-weight: bold; 
 
    width: auto; 
 
    font-style: italic; 
 
    font-size: 4em; 
 
} 
 

 
.slanted-box-white { 
 
    background-color: rgb(214, 214, 214); 
 
} 
 

 
.slanted-box-white p { 
 
    color: black; 
 
} 
 

 
.slanted-box::before { 
 
    content: ''; 
 
    height: 75px; 
 
    width: 15px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: auto; 
 
    transform: skewX(-10deg); 
 
    transform-origin: top; 
 
    -webkit-transform: skewX(-10deg); 
 
    -webkit-transform-origin: 0 0 0 0; 
 
} 
 
.slanted-box-white::before { 
 
    background-color: rgb(214, 214, 214); 
 
} 
 
.slanted-box-white::after { 
 
    background-color: rgb(214, 214, 214); 
 
} 
 
.slanted-box::after { 
 
    content: ''; 
 
    height: 75px; 
 
    width: 15px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: auto; 
 
    transform: skewX(-10deg); 
 
    transform-origin: bottom; 
 
    -webkit-transform: skewX(-10deg); 
 
    -webkit-transform-origin: 0 0 0 0; 
 
}

<div class="slanted-box slanted-box-white"> 
 
\t \t \t \t <p> 
 
\t \t \t \t CAN A <span style="color:#A602B9"><span id="ticker" style="display: inline;">TACTIC</span></span> 
 
\t \t \t \t </p> 
 
</div>

的jsfiddle：https://jsfiddle.net/Hybridx24/8j101ux9/

Answer 1

变化-webkit-transform-origin: 0 0 0 0;到-webkit-transform-origin: top;为.slanted-box::before CSS。

变化-webkit-transform-origin: 0 0 0 0;变为-webkit-transform-origin: bottom;变为.slanted-box::after css。

检查出来。我还没有在safari上进行测试，但它应该可以工作。