如何使用CSS实现页面区块交界处等尺寸波浪分隔效果

需求为在两个相邻页面区块的衔接边界实现波浪分隔效果，波浪需尺寸大致均等，为低幅宽坡形态，效果参考：

方案选型说明 #

不推荐用CSS border-radius拼接、Canvas绘制、外部背景图的方案：

• CSS拼接的弧度生硬，适配不同宽度时容易变形，很难做出均匀的缓坡效果
• Canvas实现需要额外写JS逻辑监听窗口resize，维护成本高，加载时容易出现闪烁
• 外部背景图会增加额外请求，适配高清屏时容易模糊

最优方案为内联SVG平铺实现，无额外请求、弧度可控、天然适配各种屏幕尺寸，能100%保证波浪单元尺寸均等，轻松实现低幅宽坡效果。

具体实现代码 #

HTML结构 #

<!-- 上方内容区块 -->
<section class="block-top">
  上方区块内容
</section>

<!-- 波浪分隔元素 -->
<svg class="wave-sep" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
  <defs>
    <!-- 定义单个固定尺寸的波浪单元 -->
    <pattern id="lowWave" width="200" height="20" patternUnits="userSpaceOnUse">
      <path d="M0 10C50 0 150 20 200 10V20H0V10Z" />
    </pattern>
  </defs>
  <!-- 平铺波浪填满整个分隔宽度 -->
  <rect width="100%" height="20" fill="url(#lowWave)" />
</svg>

<!-- 下方内容区块 -->
<section class="block-bottom">
  下方区块内容
</section>

配套CSS #

.block-top {
  /* 上方区块背景色，可自定义 */
  background: #165DFF;
}
.wave-sep {
  display: block;
  width: 100%;
  height: 20px;
}
.wave-sep path {
  /* 波浪填充色和下方区块背景色保持一致即可实现无缝衔接 */
  fill: #ffffff;
}
.block-bottom {
  /* 下方区块背景色，和波浪填充色一致 */
  background: #ffffff;
}

参数调整方法 #

• 调整波浪平缓度：修改pattern的height属性、.wave-sep的height属性，数值越小波浪振幅越低、坡越宽；数值越大波浪起伏越明显
• 调整波浪疏密：修改pattern的width属性，数值越大单个波浪越宽，整体波浪数量越少
• 调整波浪方向：如果需要反向波浪，只需要修改path里的贝塞尔曲线控制点坐标即可，比如把M0 10C50 0 150 20 200 10改成M0 10C50 20 150 0 200 10就能得到反向的波浪形态

该方案实现的波浪不会随容器宽度拉伸变形，所有波浪单元尺寸完全一致，完美匹配参考图的低幅缓坡效果，兼容所有现代浏览器，无需引入任何第三方资源。

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