使用CSS/SVG实现反向Clipping Mask（正弦波浪裁切）方案咨询

以下两种方案均兼容移动端，可直接实现你需要的图片底部正弦波浪边缘效果：

方案1：内嵌SVG蒙版方案 #

原理：利用SVG蒙版的像素显示规则：蒙版内白色区域对应内容显示，黑色区域对应内容隐藏，构造反向裁切的蒙版结构即可。
你可以直接把SVG代码嵌入页面，再通过CSS绑定到目标div上：

<!-- 嵌入页面的SVG蒙版，不会显示在页面中 -->
<svg width="0" height="0" style="position:absolute;visibility:hidden;">
  <defs>
    <mask id="waveMask">
      <!-- 白色全屏矩形：默认所有内容都显示 -->
      <rect width="100%" height="100%" fill="white" />
      <!-- 黑色正弦波浪路径：这部分区域对应内容隐藏，刚好裁掉底部波浪区域，留下波浪边缘 -->
      <path d="M0,100 C25,80 75,120 100,100 L100,0 L0,0 Z" fill="black" />
      <!-- 上面的path你可以替换成你需要的正弦波浪参数，调整振幅、周期适配你的设计 -->
    </mask>
  </defs>
</svg>

<!-- 你的图片容器 -->
<div class="wave-image"></div>

对应的CSS代码：

.wave-image {
  width: 100vw;
  height: 300px;
  background: url(你的背景图地址) center/cover no-repeat;
  /* 绑定SVG蒙版 */
  mask: url(#waveMask);
  -webkit-mask: url(#waveMask);
}

方案2：CSS mask直接内联SVG方案 #

如果不想在页面里加额外的SVG标签，可以直接把SVG转成data URI写在CSS里，代码更简洁：

.wave-image {
  width: 100vw;
  height: 300px;
  background: url(你的背景图地址) center/cover no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="white"/><path d="M0,100 C25,80 75,120 100,100 L100,0 L0,0 Z" fill="black"/></svg>');
  -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="white"/><path d="M0,100 C25,80 75,120 100,100 L100,0 L0,0 Z" fill="black"/></svg>');
  /* 自适应占满容器 */
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
}

额外说明 #

• 你之前认为clip-path不支持曲线是旧认知，现在CSS的clip-path: path()语法已经支持传入任意SVG路径绘制曲线，只是反向裁切用mask方案不需要额外计算反向路径，实现成本更低。
• 波浪的形状可以直接修改path路径参数调整，需要多个波浪周期、不同振幅只需要修改路径的贝塞尔曲线参数即可。
• 两种方案在iOS 9+、Android 6+均有完善支持，完全适配移动端场景。

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