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

Question

我有以下代码片段。

我只想使用一个图像片段生成帧的top-left角。

此代码完美适用于：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

除了IE，Edge和Opera Mini之外，

clip-path似乎在大多数浏览器上都有效（大部分是部分）。