如何优化Div顶部曲线效果？当前曲线顶部偏平求解决方案

想要实现如图所示的Div顶部曲线效果：

你当前用伪元素的思路没问题，但曲线偏平的问题出在border-radius: 100%/100px 100px 0 0的参数设置——水平方向100%的半径会让曲线两端过度收缩，中间区域反而平缓。下面给出两种更优的实现方式：

方案一：调整border-radius参数（兼容性好，实现简单） #

修改圆角的水平与垂直半径比例，用固定数值替代100%的水平半径，让曲线弧度更自然：

content: "";
position: absolute;
left: 0;
width: 100%;
height: 40px;
background-color: #ffecd8;
/* 水平半径设为较大固定值，垂直半径与伪元素高度一致 */
border-radius: 200px 200px 0 0 / 40px 40px 0 0;
/* 用translateY(-100%)替代固定数值，确保与下方Div精准衔接 */
transform: translateY(-100%);

你可以按需调整200px这个水平半径值：数值越大曲线越平缓，数值越小曲线越陡峭。

方案二：使用clip-path自定义曲线（精准控制形状） #

如果需要更灵活的曲线弧度，用clip-path的贝塞尔曲线定义形状，能精准控制曲线的弯曲程度：

content: "";
position: absolute;
left: 0;
width: 100%;
height: 40px;
background-color: #ffecd8;
/* 用三次贝塞尔曲线绘制顶部曲线，C后面的参数可按需调整 */
clip-path: path("M0,40 C20%,0 80%,0 100%,40 L100,100 L0,100 Z");
transform: translateY(-100%);

其中C20%,0 80%,0是贝塞尔曲线的两个控制点：

• 20%,0表示水平20%、垂直0的位置是第一个控制点
• 80%,0表示水平80%、垂直0的位置是第二个控制点
  调整这两个控制点的比例，就能改变曲线的弧度和对称程度。

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