如何用CSS实现区块底部两侧的平滑曲线效果？

问题描述 #

我需要在多个区块底部实现如图所示的曲线效果（当前展示主横幅区块）：

用border-radius实现的圆角过于生硬，且无法做出右侧的负圆角效果。试过类似示例，但无法实现仅底部两侧带有此类波浪曲线的效果，请问如何用CSS实现？

解决方案 #

方案1：自定义clip-path多边形路径 #

clip-path可以精准控制元素的可见区域，通过定义密集的坐标点模拟平滑曲线，同时实现右侧的负圆角效果。以下是适配需求的代码：

CSS代码

.hero-section {
  width: 100%;
  height: 500px;
  background: red;
  /* 自定义底部曲线的clip-path路径 */
  clip-path: polygon(
    0% 0%, 
    0% 82.5%, 
    1.7% 84.3%, 3.4% 86.1%, 5.1% 87.9%, 6.8% 89.6%, 8.5% 91.2%, 10.2% 92.8%, 11.9% 94.2%, 13.6% 95.5%, 15.3% 96.7%, 17% 97.7%, 18.6% 98.5%, 20.3% 99.1%, 22% 99.6%, 23.7% 99.9%, 25.4% 100%, 
    27.1% 99.9%, 28.8% 99.6%, 30.5% 99.1%, 32.2% 98.5%, 33.9% 97.7%, 35.6% 96.7%, 37.3% 95.5%, 39% 94.2%, 40.7% 92.8%, 42.4% 91.2%, 44.1% 89.6%, 45.8% 87.9%, 47.5% 86.1%, 49.2% 84.3%, 50.8% 82.5%, 
    52.5% 80.7%, 54.2% 78.9%, 55.9% 77.1%, 57.6% 75.4%, 59.3% 73.8%, 61% 72.2%, 62.7% 70.8%, 64.4% 69.5%, 66.1% 68.3%, 67.8% 67.3%, 69.5% 66.5%, 71.2% 65.9%, 72.9% 65.4%, 74.6% 65.1%, 76.3% 65%, 
    77.9% 65.1%, 79.7% 65.4%, 81.4% 65.9%, 83.1% 66.5%, 84.7% 67.3%, 86.4% 68.3%, 88.1% 69.5%, 89.8% 70.8%, 91.5% 72.2%, 93.2% 73.8%, 94.9% 75.4%, 96.6% 77.1%, 98.3% 78.9%, 100% 80.7%, 
    100% 0%
  );
  /* 若需要文字环绕曲线，添加shape-outside */
  shape-outside: inherit;
}

HTML代码

<div class="hero-section"></div>

方案细节

• 平滑曲线：通过密集的坐标点模拟自然曲线，坐标点越密集，过渡越柔和，彻底解决border-radius的生硬问题。
• 负圆角实现：右侧凹陷部分通过降低坐标点的Y轴数值（低于区块底部基准线）实现，模拟负圆角的视觉效果。
• 复用优化：可以将路径定义为CSS变量，方便在多个区块中复用：

:root {
  --bottom-curve-path: polygon(0% 0%, 0% 82.5%, ..., 100% 0%);
}
.section-with-curve {
  clip-path: var(--bottom-curve-path);
}

方案2：SVG背景伪元素 #

如果觉得clip-path坐标过于繁琐，可使用SVG作为区块底部的背景，通过SVG路径绘制更灵活的曲线：

CSS代码

.hero-section {
  width: 100%;
  height: 500px;
  background: red;
  position: relative;
  overflow: hidden;
}
.hero-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px; /* 曲线高度，可按需调整 */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 80"><path d="M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,48C1120,43,1280,53,1360,58.7L1440,64L1440,80L1360,80C1280,80,1120,80,960,80C800,80,640,80,480,80C320,80,160,80,80,80L0,80Z" fill="red"/></svg>') no-repeat bottom center;
  background-size: 100% 100%;
}

优势

• 可视化调整：可通过在线SVG路径工具实时调整曲线形状，直观便捷。
• 兼容性好：SVG在现代浏览器中支持完善，无需担心兼容性问题。

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