我有下面的代码片段。

我只想使用一个图像片段生成帧的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>





这应该是这样的:

html - 剪切路径是否可以在Safari/Internet Explorer/Edge上使用?-LMLPHP

这就是它在Safari / Internet Explorer / Edge上的呈现方式:

html - 剪切路径是否可以在Safari/Internet Explorer/Edge上使用?-LMLPHP

以防万一,这里有JSFiddle

https://jsfiddle.net/0skhbhok/

如果有可能解决此问题,您是否可以修改我的代码以使其在所有平台上都能工作?

提前致谢!

最佳答案

根据消息来源:Here

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

09-17 14:29
查看更多