如何仅用CSS填充曲线下方区域以匹配页面背景

不需要借助JS、SVG或者外部图片，两种纯CSS方案都可以实现曲线和下方填充区域完全贴合，匹配页面背景：

方案1：伪元素+圆角裁剪（适配绝大多数曲边区块场景） #

这是容错率最高的实现方式，不会出现曲线和填充层错位、边缘露缝的问题：

• 给曲线所在的容器设置position: relative和overflow: hidden，裁掉超出容器范围的多余内容
• 用容器的::before伪元素作为填充层，宽度设置为容器宽度的1.2-1.5倍，避免大圆角下两侧出现空隙
• 给填充层设置对应方向的border-radius，通过调整圆角的水平、垂直半径控制曲线弧度，将填充层定位到曲线对应的位置，设置好填充色即可

示例代码：

.curve-block {
  position: relative;
  width: 100%;
  min-height: 500px;
  background: 你的页面背景值;
  overflow: hidden;
}
/* 顶部向下凸的曲线+填充效果，要做底部向上凸的曲线就把top改成bottom，调整圆角方向即可 */
.curve-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: -25%;
  width: 150%;
  height: 100px; /* 控制曲线的垂直起伏高度 */
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: 你需要的填充区域颜色;
}

如果需要调整曲线弧度，单独修改border-radius的四个角半径值就行，填充区域会自动和曲线边缘完全对齐。

方案2：CSS径向渐变一步生成（适合规则弧形场景） #

如果你的曲线是标准椭圆弧，可以直接在容器背景上用径向渐变实现，不需要额外伪元素：

.curve-gradient-block {
  width: 100%;
  height: 500px;
  background: 
    radial-gradient(ellipse 100% 100px at 50% 0, 填充色 50%, transparent 50.1%),
    页面背景值;
}

代码里ellipse 100% 100px分别控制曲线的水平宽度、垂直高度，渐变硬过渡的位置就是曲线边缘，下方的色块就是填充区域，渲染性能比伪元素方案更好。

避坑提示：如果你的页面背景不是纯色，是渐变、纹理或者图片，不要用“和背景同色的色块遮挡曲线边缘”的取巧方法，直接用第一种溢出裁剪方案，把填充层放在背景层之上、内容层之下，就能适配任意背景，不会出现穿帮。

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