我可以为图像制作尺寸一致的角掩模复合吗？

Question

我有多个图像，我希望它们的角切口尺寸完全相同（就像您要折叠页面的一角一样）。我尝试过使用 Polygon()，但是当图像与大多数图像的尺寸不同时，形状会发生变化。

我尝试使用 SVG 作为遮罩图像，但我似乎无法让它在我的项目中正常工作。

我的客户正在使用 squarespace 进行开发，而我对构建器相当陌生，据我所知，它不允许 :root css 兼容性。

这些是我尝试过的几个例子：

1. 代码笔列于此处。

#block-be2f56f7b09c1e03d16d img {
  clip-path: polygon(0 0,100% 0,100% 100%,80px 100%,0 calc(100% - 20px));
}

3. 此处列出的建议；然而，当我调整代码以读取时，我只会看到任何类型的变化：

#block-be2f56f7b09c1e03d16d img {
mask: url('https://images.squarespace-cdn.com/content/666cc44ae1d4196d1b3ab997/77f9aca1-8e05-4b5b-bd7d-7181a4c46a9d/Corner+Mask.png?content-type=image%2Fpng'),
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  mask-size: 25%;
  mask-position: bottom left;
  mask-repeat: no-repeat;
}

使用这种方法，它给了我想要的效果，但是看到的图像的唯一量是掩模的宽度。

请参阅下面的代码片段：

.image {
   mask: url('https://images.squarespace-cdn.com/content/666cc44ae1d4196d1b3ab997/77f9aca1-8e05-4b5b-bd7d-7181a4c46a9d/Corner+Mask.png?content-type=image%2Fpng'), linear-gradient(#000 0 0);
  mask-position: bottom left;
  mask-size: 25%;
  mask-repeat: no-repeat;
  mask-composite: exclude;
}

<div id="column-1">
<img src="https://picsum.photos/id/237/200/300" class="image">
<h2>Some Text Here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Answer 1

剪辑路径已使用 px 单位固定了取出量的大小，因此任何长宽比/大小的任何图像都将取出相同的量。

div>img {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 80px 100%, 0 calc(100% - 20px));
}

<div id="column-1">
  <img src="https://picsum.photos/id/237/200/300" class="image">
  <h2>Some Text Here</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>