Html 使用css对图像进行裁剪

我想削减与透明背景的图像角落。我已经编写了以下代码

正文{
背景图像：url（'http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg');
}
.形象{
位置：绝对位置；
宽度：200px；
高度：200px；
}
.图像img{
宽度：100%；
身高：100%；
}
.图片：之前{
位置：绝对位置；
内容：“；
边框顶部：60px纯红；
右边框：60px实心透明；
顶部：-1px；
左：-1px；
}
.图片：之后{
位置：绝对位置；
内容：“；
边框底部：60px实心红色；
左边框：60px实心透明；
底部：-1px；
右：-1px；
}
布莱克先生{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.6）；
}

您（希望）很快就能使用 像这样（现在圆角可能会显示为后备），并且不需要使用伪元素

正文{
背景：绿色；
}
.形象{
位置：绝对位置；
宽度：200px；
高度：200px；
}
.图像img{
宽度：100%；
身高：100%；
边角形状：斜面；
边界半径：30px 0 30px 0；
}
布莱克先生{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.6）；
}

---

删除了前后伪零件，并添加了剪辑路径样式

正文{
背景图像：url（'http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg');
}
.形象{
位置：绝对位置；
宽度：200px；
高度：200px；
}
.图像img{
宽度：100%；
身高：100%；
-webkit剪辑路径：多边形（20%0%、80%0%、100%0%、100%80%、80%100%、0%100%、0%86%、0%20%）；
剪辑路径：多边形（20%0%、80%0%、100%0%、100%80%、80%100%、0%100%、0%86%、0%20%）；
}
}
布莱克先生{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.6）；
}

---

您可以通过添加额外的元素或通过css伪元素：before&:after来实现所需的结果

body{背景：#fff；}
.img ctnr{位置：相对；}
.img{宽度：450px；高度：300px；背景：紫色；}
.img ctnr:之前，.img ctnr:之后{
内容：“”；位置：绝对；显示：块；
宽度：100px；高度：100px；
背景：#fff；
变换：旋转（45度）；
}
.img ctnr:在{top:-50px；left:-50px；}之前
.img ctnr:在{top:250px；left:400px；}之后

---

将容器向右旋转45度， 将溢出设置为隐藏。 并使高度更大，这样就不会夹住不需要的角

将图像旋转-45度，使其再次保持水平

你做到了：

正文{
背景图像：url（'http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg');
}
.形象{
位置：绝对位置；
宽度：200px；
高度：400px；
变换：旋转（45度）；
溢出：隐藏；
利润上限：-100px；
}
.图像img{
宽度：100%；
身高：50%；
边缘顶部：100px；
变换：旋转（-45度）；
}
布莱克先生{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.6）；
}

你说的捷径是什么意思？你需要圆角吗？不，我不想要圆角。无论我做了什么，我都会写在片段中。因为我想要透明而不是红色；谢谢是否兼容所有浏览器？仅在chrome上使用剪辑路径。有没有其他方法可以做到这一点让我检查一下，或者如果这对firefox不起作用，那么让我尝试另一种解决方案。我在这个div后面使用背景图像，这就是为什么我不能使用背景：#fff；追