如何使用CSS实现指定样式的曲线效果

以下是三种常用的实现方案，可根据实际业务场景选择：

• 方案1：border-radius扩展语法实现（兼容性最优，代码量最少）
  仅需给上层容器设置底部双向圆角即可实现，适配性强，不会随容器宽度变化变形：

  .upper-container {
    width: 100%;
    height: 200px;
    background-color: #6366f1;
    /* 第一个参数为水平占比，第二个为垂直方向曲率，可按需调整修改凹陷深度 */
    border-bottom-left-radius: 50% 40px;
    border-bottom-right-radius: 50% 40px;
  }
  

• 方案2：clip-path属性实现（灵活度最高，支持自定义任意曲线形状）
  通过path函数绘制二次贝塞尔曲线控制容器的裁剪区域，调整参数即可修改曲线弧度：

  .upper-container {
    width: 100%;
    height: 200px;
    background-color: #6366f1;
    /* Q指令后的第一个坐标为贝塞尔曲线控制点，第二个为终点坐标，按需调整即可 */
    clip-path: path("M0 0 h100% v160 Q 50% 200 0 160 Z");
  }
  

• 方案3：嵌入SVG实现（复杂曲线场景优先选择，适配所有设备）
  自定义SVG路径作为衔接层，放在上下容器的拼接位置即可，适合有特殊曲率要求的场景：

  <!-- 宽度设为100%可自适应所有屏幕，path的fill值和上层容器背景色保持一致即可 -->
  <svg width="100%" height="40" viewBox="0 0 1200 40" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0 h1200 v0 C 600 40 0 0 0 0 Z" fill="#6366f1"/>
  </svg>
  

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