On top is wanted result, below is svg result
由于Microsoft Edge无法识别属性clip-path: polygon
,因此我读到某处应该使用SVG图像来完成此操作。
这是我的原始代码:
-webkit-clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
这是我尝试使其与Edge一起使用:
clip-path: url('#myclippath');
以及div旁边的svg:
<svg width="0" height="0">
<clipPath id="myclippath" clipPathUnits="objectBoundingBox">
<polygon points="0, 0, 1.0, 0, 0.75, 1.0, 0, 1.0"/>
</clipPath>
</svg>
问题是SVG形状应用于背景图像,而不是div本身。这使它变得毫无用处。
可以将SVG形状应用于div吗?如果没有,是否有jQuery替代品(以为我宁愿坚持使用CSS)?