如何从底部中心设置BorderRadius以实现指定设计？

普通的BorderRadius只能设置元素四个角的圆角，无法直接实现底部中心内凹的效果，下面针对不同技术栈给出具体实现方法：

Flutter 实现 #

通过自定义CustomClipper裁剪路径，精准绘制底部内凹的形状：

class BottomCenterClip extends CustomClipper<Path> {
  final double radius;

  BottomCenterClip(this.radius);

  @override
  Path getClip(Size size) {
    final path = Path();
    // 依次连接左上角、右上角、右下角、内凹右侧点
    path.lineTo(0, 0);
    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height - radius);
    // 绘制底部内凹的圆弧
    path.arcToPoint(
      Offset(size.width / 2, size.height - radius),
      radius: Radius.circular(radius),
      clockwise: false,
    );
    // 连接内凹左侧点、左下角，闭合路径
    path.lineTo(0, size.height - radius);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

// 使用示例
Container(
  width: 300,
  height: 200,
  child: ClipPath(
    clipper: BottomCenterClip(30),
    child: Container(color: Colors.blue),
  ),
)

Web 前端（CSS）实现 #

方法1：使用clip-path直接绘制路径 #

适合任意背景，路径可灵活调整：

.bottom-center-shape {
  width: 300px;
  height: 200px;
  background: #2196F3;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 60% calc(100% - 30px), 50% 100%, 40% calc(100% - 30px), 0 calc(100% - 30px));
}

方法2：伪元素叠加（适合纯色背景） #

利用伪元素绘制半圆，覆盖在底部中心，模拟内凹效果：

.bottom-center-shape {
  width: 300px;
  height: 200px;
  background: #2196F3;
  position: relative;
  overflow: hidden;
}

.bottom-center-shape::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 30px;
  background: #ffffff; /* 与元素所在背景色一致 */
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

Android 原生实现 #

通过layer-list图层叠加，实现底部内凹效果：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 底层蓝色矩形 -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#2196F3"/>
        </shape>
    </item>
    <!-- 顶部白色半圆覆盖底部中心（颜色需与页面背景一致） -->
    <item
        android:width="60dp"
        android:height="30dp"
        android:gravity="bottom|center_horizontal">
        <shape android:shape="oval">
            <solid android:color="#FFFFFF"/>
        </shape>
    </item>
</layer-list>

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