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

Question

我想用[[45度]切掉我的图像角]，如下面的clip-pat h图像，我需要按百分比的值，我只需要剪切路径的值，

#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度

我想像下面的图像一样使用剪切路径将图像角切成45度角，我想要按百分比计算值，我只需要剪切路径的值，＃div img：first-child {剪切路径：多边形（ 100％0％...

Answer 1

使包含的div的高度=宽度的50％。

现在，将45％的片段简单地移到div底部的中间：

Answer 2

使用遮罩而不是clip-path，您可以轻松地将其倾斜45度