如何为图片创建尺寸一致的边角遮罩合成效果？

• 需要给多张不同尺寸的图片添加尺寸完全一致的折角裁切效果
• 尝试clip-path: polygon()方案，但图片尺寸变化时，裁切形状会随之改变
• 尝试用SVG作为mask-image，但在Squarespace项目中无法生效
• 项目基于Squarespace开发，该编辑器不支持:root CSS变量

已尝试的方案 #

1. 参考过Codepen上的折角实现方案，未解决问题
2. 使用以下clip-path代码：

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

3. 参考Stack Overflow的遮罩反转方案，调整后代码可实现折角效果，但图片无法显示全宽：

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

方法1：适配任意尺寸的clip-path方案 #

放弃纯固定像素的路径定义，用calc()关联图片尺寸与折角位置，保证折角大小固定：

#block-be2f56f7b09c1e03d16d img {
  /* 折角固定为80px宽、20px高，适配所有尺寸图片 */
  clip-path: polygon(
    0 0, 
    100% 0, 
    100% calc(100% - 20px), 
    calc(100% - 80px) 100%, 
    0 100%
  );
}

原理：通过calc()让折角的终点位置随图片尺寸动态调整，同时固定折角的像素大小，确保不同图片的折角完全一致。

方法2：修复mask方案的全宽显示问题 #

调整mask-size属性，分别指定遮罩图片和渐变层的尺寸，让渐变层占满整个图片：

#block-be2f56f7b09c1e03d16d img {
  mask: 
    /* 固定遮罩图片为80x20px，匹配折角大小 */
    url('你的遮罩图片URL') bottom left / 80px 20px no-repeat,
    /* 渐变层占满整个图片 */
    linear-gradient(#000, #000) 0 0 / 100% 100% no-repeat;
  mask-composite: exclude;
}

说明：拆分mask-size为两个独立值，遮罩图片用固定像素保证折角一致性，渐变层覆盖全图，这样图片就能完整显示，同时保留折角效果。

Squarespace适配提示 #

• 直接在Squarespace的「自定义CSS」面板中添加代码，确保选择器正确匹配目标图片（比如使用区块ID或自定义类）
• 无需使用:root变量，直接写固定值或calc()表达式即可

内容的提问来源于stack exchange，提问作者Awktopus