html - 剪辑路径是否适用于 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/

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

提前致谢！

标签： htmlcss

Answer 1

根据消息来源：这里

clip-path除了 IE、Edge 和 Opera Mini 之外，似乎在大多数浏览器上都能正常工作（大部分是部分）。