如何用HTML和CSS绘制目标曲线？恳请技术帮助

云原生阿岚

2026-8-4

解决CSS绘制下凹曲线的问题

你的代码当前是通过容器的上边框+圆角实现了上凸的圆弧边框，但目标是一条中间向下凹陷的单曲线，调整方向和实现方式就能达到效果，下面提供两种实用方案：

方案一：使用SVG（精准可控）

SVG的贝塞尔曲线能完美实现这种平滑曲线，代码简洁且容易调整曲线弧度：

<svg width="500" height="50" viewBox="0 0 500 50" fill="none">
  <!-- Q是二次贝塞尔曲线，参数：控制点坐标 终点坐标 -->
  <!-- 这里控制点(250,50)决定了曲线凹陷的深度，数值越大凹陷越深 -->
  <path d="M0 0 Q250 50 500 0" stroke="#000" stroke-width="5" />
</svg>

方案二：CSS伪元素实现

如果想用纯CSS，可通过伪元素+底部边框+反向圆角来实现：

.curve {
  width: 500px;
  height: 50px; /* 控制曲线凹陷的深度 */
  position: relative;
}
.curve::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-bottom: 5px solid #000;
  /* 圆角设置为底部左右100%，形成下凹曲线 */
  border-radius: 0 0 100% 100% / 0 0 50% 50%;
}