剪切具有多边形形状的图像

Question

以下代码剪辑具有矩形形状的图像：

img {
   position: absolute;
   clip: rect(20px,60px,200px,0px);
}

        

<img src="w3css.gif" width="100" height="140">

有没有办法在不同的点上剪切具有不同边的随机多边形的图像。

Answer 1

来自clip上的MDN文档：

  

警告：不推荐使用此属性。改为使用clip-path。

https://developer.mozilla.org/en-US/docs/Web/CSS/clip

您可以使用clip-path属性，该属性还支持定义为PNG掩码或SVG路径的变量路径。

.target {
    clip-path: url(resources.svg#c1);
}

请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

上周也有a good HTML5Rocks article on CSS shapes。它包括有关新CSS形状和剪辑属性的注释，以及如何组合它们以使文本浮动到这些形状中。