Safari中的傾斜不起作用

Question

轉換：傾斜在Safari中無法正常工作。

在Chrome和Firefox中可以完美運行，但在Safari中則不能。

如果有人可以幫助我，我將不勝感激。 謝謝！

https://codepen.io/alfrex92/pen/PQWgrw

野生動物園的行為

我想要的是

 div { width:200px; height:80px; margin:0 auto; color:#fff; font-size:2em; transform:skewX(0) skewY(200deg); -webkit-transform: skewX(0) skewY(200deg); overflow: hidden; } span { position: absolute; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%) skew(0, -200deg); -webkit-transform: translate(-50%, -50%) skewX(0) skewY(-200deg); } .bg { width:200px; height:160px; background-image: url(https://picsum.photos/458/354?random); background-size: cover; background-position: center center; &-2 { background-image: url(https://picsum.photos/458/354?random&time=1518166464706); } &-3 { background-image: url(https://picsum.photos/458/354?random&time=1518166454899); } &-4 { background-image: url(https://picsum.photos/458/354?random&time=1518166474771); } } 

 <div> <span class="bg"></span> <span>01</span></div> <div > <span class="bg bg-2"></span> <span>O2</span> </div> <div> <span class="bg bg-3"></span> <span>03</span> </div> <div > <span class="bg bg-4"></span> <span>04</span> </div> 

Answer 1

嘗試添加以下內容

div.skew
{
   transform: skewX(20deg) skewY(35deg); /* W3C */
   -webkit-transform: skewX(20deg) skewY(35deg); /* Safari & Chrome */
   -moz-transform: skewX(20deg) skewY(35deg); /* Firefox */
   -ms-transform: skewX(20deg) skewY(35deg); /* Internet Explorer */
   -o-transform: skewX(20deg) skewY(35deg); /* Opera */
}

Answer 2

我找到了答案。

我加了

  position:relative;

在<div>內部

例如： https ： //codepen.io/alfrex92/pen/QmyVQb