html - 剪辑路径是否适用于 Safari/Internet Explorer/Edge？

Question

我有下面的代码片段。

我只想使用一个图像片段生成帧的左上角。

此代码在以下平台上完美运行:Firefox/Chrome 但不能在以下平台上运行良好:Safari/Internet Explorer/Edge。

.frame {
    width: 200px;
    height: 300px;
}
.trapezoid-top, .trapezoid-left {
    background-image: url("https://image.ibb.co/dNUCFd/fragment.png");
    background-size: contain;
}
.trapezoid-top {
    width: 200px;
    height: 40px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 40px 100%);
    transform-origin: top left;
    transform: rotate(0deg);
}
.trapezoid-left {
    width: 300px;
    height: 40px;
    margin-top: -40px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 40px 100%);
    transform-origin: top left;
    transform: rotate(90deg) scale(1, -1);
}

<div class="frame">
	<div class="edge_top_left">
		<div class="trapezoid-top"></div>
		<div class="trapezoid-left"></div>
	</div>
</div>

它应该是这样的:

这就是它在以下平台上的渲染方式:Safari/Internet Explorer/Edge:

以防万一，这里有 JSFiddle:

https://jsfiddle.net/0skhbhok/

如果可以解决此问题，您能否修改我的代码以使其适用于所有平台？

提前致谢!

Answer 1

根据消息来源:Here

clip-path 似乎可以在大多数浏览器上工作(大部分是部分工作)，IE、Edge 和 Opera Mini 除外。