如何使用CSS实现示例图中的波浪形状效果

不需要改动现有HTML结构，直接基于你写的CSS扩展即可，两种可选实现方式：

方案1：伪元素+圆角实现（兼容性最优，易自定义波浪形态） #

核心是利用容器裁剪溢出内容的规则，通过两个和上层背景同色的椭圆伪元素，在容器顶部“切”出自然波浪边，修改后的完整CSS如下：

#wave {
  position: absolute;
  height: 50%;
  width: inherit;
  background: #e0efe3;
  overflow: hidden; /* 核心规则：裁剪伪元素超出容器的部分 */
}

#wave::before,
#wave::after {
  content: '';
  position: absolute;
  top: -32px; /* 控制波浪的整体偏移位置 */
  width: 60vw; /* 控制波浪的横向跨度，数值越大波浪越平缓 */
  height: 64px; /* 控制波浪的起伏幅度，数值越大浪峰越高 */
  border-radius: 50%;
  background: #ffffff; /* 与波浪上方的页面背景色保持一致，自然形成挖空效果 */
}

#wave::before {
  left: -20vw;
}

#wave::after {
  right: -20vw;
  transform: translateY(32px); /* 错位两个伪元素的位置，形成连续起伏的浪型 */
}

• 调整伪元素的height、top值可以直接修改波浪的凸起高度
• 调整伪元素的width值可以修改波浪的疏密程度
• 注意伪元素的背景色必须和波浪上方的实际页面背景色完全相同，否则会出现色块断层

方案2：clip-path属性实现（代码最简） #

如果不需要兼容特别老的浏览器，可以直接用裁剪路径定义波浪形状，单属性就能完成效果，无需伪元素：

#wave {
  position: absolute;
  height: 50%;
  width: inherit;
  background: #e0efe3;
  /* 路径内的数值可以根据你需要的波浪幅度、跨度自行调整 */
  clip-path: path('M0,28 C180,0 380,56 560,28 C740,0 940,56 1120,28 L1120,100% L0,100% Z');
}

• 该方法的缺点是固定路径数值在不同宽度的屏幕上会出现波浪拉伸变形，更适合固定宽度的布局场景

内容的提问来源于stack exchange，提问作者James in code