使用固定角度的CSS剪切路径剪切图像角

Question

我想将图像的角落切成 45度，就像下面的图片clip-pat一样，我希望按百分比显示值，我只需要剪切路径的值，

#div img:first-child {
  clip-path: polygon(100% 0%, 0% 0%, 9.52% 98.91%, 89.95% 100%);
}

<div id="div">
  <img src="https://i.picsum.photos/id/10/400/300.jpg">
</div>

图像仅是因为角度不完全是45度，我需要精确地切成45度，我的代码也不是45度

Answer 1

使用遮罩代替clip-path，您可以轻松设置45度角

img {
  -webkit-mask:
     linear-gradient(-135deg,#fff 50%,transparent 50%) top left ,
     linear-gradient(-225deg,#fff 50%,transparent 50%) top right;
  -webkit-mask-size:2000px 2000px; /* width = height and big enough to consider all the cases */
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-composite: destination-in;
  mask:
     linear-gradient(-135deg,#fff 50%,transparent 50%) top left,
     linear-gradient(-225deg,#fff 50%,transparent 50%) top right;
  mask-size:2000px 2000px; /* width = height and big enough to consider all the cases */
  mask-repeat:no-repeat;
  mask-composite: intersect;
  
  margin:5px;
}

<img src="https://i.picsum.photos/id/12/500/100.jpg" >

<img src="https://i.picsum.photos/id/10/700/100.jpg" >

<img src="https://i.picsum.photos/id/125/500/200.jpg" >

如果图像的宽度始终大于高度，则使用clip-path的另一个想法将仅起作用：

img {
  clip-path:polygon(0 0,100% 0,calc(100% - 2000px) 2000px,2000px 2000px);
  margin:5px;
}

<img src="https://i.picsum.photos/id/12/500/100.jpg" >

<img src="https://i.picsum.photos/id/10/700/100.jpg" >

<img src="https://i.picsum.photos/id/125/500/200.jpg" >