如何使用带clip-path的div替代SVG实现底部波浪效果

• clip-path: url(#path01)写法无效：CSS的url()裁剪引用规则要求，被引用的SVG元素必须是<clipPath>标签包裹的裁剪定义，直接引用普通<path>元素无法被识别为裁剪路径。
• 直接复制路径参数写clip-path:d="M0,64..."无效：CSS裁剪的path()函数语法不支持d=属性写法，需要直接把路径字符串传入path()括号内；同时原路径是基于1440px宽度的固定像素坐标，没有做相对适配，直接用会出现裁剪位置错位、显示不全的问题。

两种方案都可以实现波浪贴在div底部的效果，按需选择即可。

方案1：修正SVG引用写法（兼容性最好） #

第一步，把原路径放入<clipPath>标签内，设置为不占文档流的隐藏SVG，添加clipPathUnits="objectBoundingBox"属性让路径坐标按被裁剪元素的尺寸做相对适配，把原固定像素坐标转换为0~1区间的比例坐标：

<!-- 裁剪路径定义，宽高设为0不占用页面空间 -->
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="waveClip" clipPathUnits="objectBoundingBox">
    <path d="M0,0.985 L0.042,0.82 C0.083,0.662,0.167,0.323,0.25,0.165 C0.333,0,0.417,0,0.5,0.165 C0.583,0.323,0.667,0.662,0.75,0.738 C0.833,0.815,0.917,0.662,0.958,0.574 L1,0.492 L1,0 L0.958,0 C0.917,0,0.833,0,0.75,0 C0.667,0,0.583,0,0.5,0 C0.417,0,0.333,0,0.25,0 C0.167,0,0.083,0,0.042,0 L0,0Z"></path>
  </clipPath>
</svg>

<!-- 目标展示div -->
<div class="clip-01"></div>

第二步，CSS引用正确的裁剪路径id：

.clip-01{
    height: 140px;
    background: lightblue;
    clip-path: url(#waveClip);
}

该方案支持所有现代浏览器，div宽度任意变化时波浪会自动等比缩放，始终贴在div底部。

方案2：纯CSS path()写法（无需额外SVG标签） #

不需要在页面插入SVG代码，直接在CSS里调用path()函数传入转换好的相对路径即可：

.clip-01{
    height: 140px;
    background: lightblue;
    clip-path: path('M0,0.985 L0.042,0.82 C0.083,0.662,0.167,0.323,0.25,0.165 C0.333,0,0.417,0,0.5,0.165 C0.583,0.323,0.667,0.662,0.75,0.738 C0.833,0.815,0.917,0.662,0.958,0.574 L1,0.492 L1,0 L0.958,0 C0.917,0,0.833,0,0.75,0 C0.667,0,0.583,0,0.5,0 C0.417,0,0.333,0,0.25,0 C0.167,0,0.083,0,0.042,0 L0,0Z');
}

• 原路径的绘制逻辑是从靠近viewBox底部的位置起笔画波浪，最后沿顶部拉回起点闭合，因此裁剪后波浪会自然显示在div底部，不需要额外调整偏移
• 如果需要固定波浪的像素尺寸、不随div宽度拉伸，删除clipPathUnits="objectBoundingBox"属性，把原1440px宽度的路径直接放入<clipPath>，给div设置固定1440px宽度即可
• 禁止直接给普通<path>标签加id当裁剪源引用，必须包裹在<clipPath>标签内才符合浏览器解析规则

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