这种形状在 CSS 中是否可行而不是 clip-path

Question

我刚刚发现 firefox 无法识别 clip-path，因此我想重新创建一个类似于下面的形状，但在 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>

这种形状在 CSS 中是否可行而不是 clip-path

Is this shape feasible in CSS rather than clip-path

css

clip-path