我有下面的代码片段。
我只想使用一个图像片段生成帧的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/
如果有可能解决此问题,您是否可以修改我的代码以使其在所有平台上都能工作?
提前致谢!
最佳答案
根据消息来源:Hereclip-path
在大多数浏览器上似乎都可以工作(大部分是部分工作),但IE,Edge和Opera Mini除外。