如何用HTML和CSS将形状边框编辑为任意曲线或角度？

下面给你几个实用的方案，能精准做出你要的顶部曲线效果：

方法1：用border-radius精细控制简单对称曲线 #

如果是对称的弧形曲线，直接用border-radius的多值语法就能搞定，不用伪元素画直线：

<div class="curved-top-box"></div>

.curved-top-box {
  width: 300px;
  height: 200px;
  background: #4285F4;
  /* 左上/右上：水平半径120px、垂直半径60px；右下/左下直角 */
  border-radius: 120px 120px 0 0 / 60px 60px 0 0;
}

斜杠前是水平方向的圆角半径，斜杠后是垂直方向的，调整这两组数值就能拉出不同弧度的椭圆曲线，完全适配你的需求。

方法2：伪元素+圆角实现非对称曲线 #

如果曲线不对称，用伪元素做一个覆盖顶部的弧形，模拟挖空效果：

<div class="custom-curved-box"></div>

.custom-curved-box {
  width: 300px;
  height: 200px;
  background: #4285F4;
  position: relative;
  overflow: hidden;
}

.custom-curved-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: -20%; /* 超出容器左侧，让曲线更自然 */
  width: 140%;
  height: 80px;
  background: #fff; /* 用页面背景色，模拟顶部曲线的缺口 */
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

调整伪元素的宽度、高度和圆角数值，就能自定义曲线的弧度和位置，适配各种非对称的需求。

方法3：clip-path自定义任意曲线（最灵活） #

如果需要完全自定义的曲线形状，用CSS的clip-path属性，通过SVG路径精确控制：

<div class="clip-curved-box"></div>

.clip-curved-box {
  width: 300px;
  height: 200px;
  background: #4285F4;
  /* 用三次贝塞尔曲线定义顶部路径，坐标可按需修改 */
  clip-path: path("M0,60 C50,0 250,0 300,60 L300,200 L0,200 Z");
}

path()里的C是三次贝塞尔曲线，中间的50,0和250,0是控制点，调整这两个点的坐标就能随意改变曲线的弧度。可以用在线SVG路径编辑器生成你想要的路径代码，直接复制过来就行。

方法4：内嵌SVG背景实现复杂曲线 #

要是曲线特别复杂，直接把SVG作为背景嵌入CSS，兼容性拉满：

<div class="svg-curved-box"></div>

.svg-curved-box {
  width: 300px;
  height: 200px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200"><path d="M0,60 C50,0 250,0 300,60 L300,200 L0,200 Z" fill="%234285F4"/></svg>') no-repeat;
  background-size: 100% 100%;
}

修改SVG里的path代码就能做出任何你想要的曲线，完全不用受CSS属性的限制。

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