傾斜的框不能在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上進行測試，但它應該可以工作。