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

Question

我想用 45 度 将我的图像边角剪掉，如下图 clip-path，我想要按百分比的值，我只需要剪裁的值-路径，

#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，您可以轻松获得 45deg

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://picsum.photos/id/12/500/100" >

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

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

另一个使用 clip-path 的想法只有在图像的宽度总是大于高度的情况下有效：

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

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

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

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

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

Cutting image corners with CSS clip-path with a fixed angle

html

css

clip-path