如何使用CSS border-radius属性实现指定的曲线形状

实现方案 #

你当前的border-radius配置给顶部两个角也设置了垂直曲率，所以无法得到顶部平直的效果，调整参数只给下半部分设置曲率即可实现目标形状，完整代码示例如下：

HTML代码 #

<div class="custom-shape"></div>

CSS代码 #

.custom-shape {
  width: 240px;
  height: 180px;
  background: #3b82f6;
  /* 核心配置：前四个值对应四个角的水平曲率，斜杠后对应垂直曲率，仅给底部两个角设置曲率 */
  border-radius: 0 0 45% 45% / 0 0 90% 90%;
}

如果弧度匹配度不符合预期，可以微调45%和90%两个数值：调大45%可以让底部更宽，调大90%可以让底部弧度更圆润、两侧收腰效果更明显。

目标形状参考 #

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