這種形狀是可行的在CSS而不是剪輯路徑

Question

我剛剛發現，clip-path不被firefox識別，因此我想重新創建一個類似於下面的但在CSS中的形狀。

可能嗎？

非常感謝，

Answer 1

是的，你可以使用transform的perspective和rotateY值：

#elem { 
    transform: perspective(800px) rotateY(-45deg); 
} 

#cont { 
 
    border: 1px solid gray; 
 
    width: 107px; 
 
} 
 
#cont img { 
 
    transform: perspective(800px) rotateY(-45deg); 
 
    margin-left: -25px; 
 
    margin-top: 4px; 
 
}

<div id="cont"> 
 
    <img src="https://dummyimage.com/150x100/s7e/ffe" /> 
 
</div>