如何实现向内凹陷弧形效果？底部导航栏上方需如图内凹

嘿，我来帮你搞定这个向内凹陷的弧形效果！针对底部导航栏上方的凹陷设计，有几种简单又实用的CSS方案，我给你拆解一下：

方案1：用 border-radius + 伪元素（最适合纯色背景） #

这个方法思路很简单：在顶部区域的底部加一个和导航栏同色的“圆形补丁”，把顶部区域的背景“挖”出一个凹陷，刚好和底部导航栏衔接。

/* 先定义底部导航栏的样式 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px; /* 你的导航栏高度 */
  background: #ffffff; /* 导航栏背景色 */
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

/* 导航栏上方的内容区域 */
.top-section {
  position: relative;
  margin-bottom: 60px; /* 给固定导航栏留出空间 */
  background: #f5f5f5; /* 顶部区域背景色 */
  padding: 2rem;
}

/* 用伪元素创建凹陷效果 */
.top-section::after {
  content: '';
  position: absolute;
  bottom: -30px; /* 取导航栏高度的一半，让伪元素刚好卡在导航栏顶部 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  width: 120px; /* 凹陷的宽度 */
  height: 60px; /* 和导航栏高度一致 */
  border-radius: 0 0 60px 60px; /* 只给下半部分加圆角，形成向内凹的弧形 */
  background: #ffffff; /* 和导航栏背景色完全一致 */
}

方案2：用 clip-path 自定义裁剪（更灵活） #

如果想要更精准的凹陷形状，或者你的顶部区域有渐变背景，用clip-path直接裁剪顶部区域会更合适。它可以直接定义容器的可见区域，挖掉你想要的凹陷部分。

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #ffffff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

.top-section {
  position: relative;
  margin-bottom: 60px;
  background: linear-gradient(180deg, #f5f5f5, #e0e0e0); /* 渐变背景也能完美适配 */
  padding: 2rem;
  /* 核心：用椭圆裁剪出底部中间的凹陷 */
  /* ellipse(宽度 高度 at 水平位置 垂直位置) */
  clip-path: ellipse(60px 30px at 50% 100%);
}

如果想要更方正一点的凹陷，也可以用inset语法：

clip-path: inset(0 0 30px 0 round 0 0 60px 60px);

方案3：适配带圆角的底部导航栏 #

如果你的底部导航栏本身有边角造型（比如左右圆角），只需要微调伪元素或者裁剪路径的位置，让凹陷和导航栏的圆角更协调：

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 2rem;
  right: 2rem;
  height: 60px;
  background: #ffffff;
  border-radius: 20px 20px 0 0; /* 导航栏顶部圆角 */
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

.top-section::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: calc(50% - 60px); /* 调整水平位置，让凹陷居中且和导航栏宽度匹配 */
  width: 120px;
  height: 60px;
  border-radius: 0 0 60px 60px;
  background: #ffffff;
}

小提示 #

• 一定要保证凹陷部分的颜色和导航栏背景色完全一致，不然会出现明显断层
• 可以根据需求调整width、height、border-radius的值，调出你想要的凹陷大小和弧度
• 如果页面背景是复杂图案，可能需要用CSS mask属性来实现，但上面的方案已经能覆盖绝大多数场景啦

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