如何实现两张图片之间适配动态高度的无纯色依赖SVG分隔器

核心通过clip-path调用内联SVG裁剪路径实现，完全不依赖纯色背景遮罩，天然适配任意动态内容高度。

完整代码示例 #

<!-- 上方内容区块 -->
<section class="upper-block">
  <!-- 可插入任意动态内容，高度自适应 -->
  <p>上方区块内容</p>
</section>

<!-- 下方内容区块 -->
<section class="lower-block">
  <!-- 可插入任意动态内容，高度自适应 -->
  <p>下方区块内容</p>
</section>

<!-- 内联SVG裁剪路径定义，不会在页面中渲染 -->
<svg width="0" height="0" viewBox="0 0 1440 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="wave-divider" clipPathUnits="objectBoundingBox">
      <path d="M0,0 C320,120 480,0 720,60 C960,120 1120,0 1440,60 V1 H0 V0 Z" transform="scale(0.0006944 0.008333)" />
    </clipPath>
  </defs>
</svg>

<style>
.upper-block {
  /* 替换为上方区块的自定义背景资源（图片/渐变/纯色均可） */
  background: #2563eb;
  min-height: 300px;
  padding: 2rem;
  color: #fff;
}

.lower-block {
  /* 替换为下方区块的自定义背景资源（图片/渐变/纯色均可） */
  background: #1e40af;
  min-height: 400px;
  padding: 2rem;
  /* 取值略大于波浪高度即可，避免内容被裁剪遮挡 */
  padding-top: 80px;
  color: #fff;
  /* 引用定义好的波浪裁剪路径 */
  clip-path: url(#wave-divider);
}
</style>

方案优势 #

• 无纯色背景依赖：上下区块可使用任意背景类型，图片、渐变、纯色都可以正常展示
• 动态高度适配：裁剪路径仅作用于区块边缘，不会影响内容区域，区块高度随内容任意变化都不会破坏分隔效果
• 全宽度自适应：clipPathUnits设置为objectBoundingBox后，裁剪路径会自动适配不同屏幕宽度
• 高度可定制：修改clipPath内的path的d属性值，即可调整波浪的高度、弧度、波峰数量，实现你需要的样式

替代方案（兼容旧浏览器） #

如果需要兼容不支持clip-path的老旧浏览器，可以把单独的SVG波浪元素绝对定位在两个区块衔接处，SVG背景设为透明，路径填充和下方区块背景保持一致即可，同样不需要上层纯色遮罩。

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