Bootstrap 5侧边菜单激活菜单项实现外凸圆角效果求助

核心实现思路是通过两个绝对定位的伪元素模拟内凹衔接圆角，避开CSS原生不支持负值border-radius的限制，完全兼容Bootstrap 5的导航组件结构。 #

实现代码 #

HTML结构（Bootstrap 5 原生侧边栏结构） #

<div class="d-flex vh-100 overflow-hidden">
  <!-- 左侧侧边栏 -->
  <div class="bg-dark" style="width: 240px;">
    <ul class="nav nav-pills flex-column p-3 gap-2">
      <li class="nav-item">
        <a href="#" class="nav-link active">首页</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link text-white">数据中心</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link text-white">系统设置</a>
      </li>
    </ul>
  </div>
  <!-- 右侧主内容区 -->
  <main class="flex-grow-1 bg-white p-4">
    页面内容
  </main>
</div>

自定义CSS #

/* 侧边栏导航项基础样式 */
.nav-pills .nav-link {
  position: relative;
  border-radius: 8px 0 0 8px;
}
/* 激活态样式 */
.nav-pills .nav-link.active {
  background: #fff;
  color: #212529;
}
/* 上下衔接圆角伪元素 */
.nav-pills .nav-link.active::before,
.nav-pills .nav-link.active::after {
  content: "";
  position: absolute;
  right: 0;
  width: 16px;
  height: 16px;
  background: #212529; /* 和侧边栏背景色保持一致 */
}
.nav-pills .nav-link.active::before {
  top: -16px;
  border-bottom-right-radius: 8px;
}
.nav-pills .nav-link.active::after {
  bottom: -16px;
  border-top-right-radius: 8px;
}

注意事项 #

• 伪元素的宽高、圆角值、偏移量需要匹配：示例中圆角为8px，因此伪元素宽高设为16px，上下偏移为-16px，可根据实际需求等比调整数值
• 必须确保激活项背景和主内容区背景、伪元素背景和侧边栏背景完全一致，无明显色差即可隐藏拼接痕迹
• 如果侧边栏放在页面右侧，只需将所有左右方向的属性（border-radius方向、left/right定位）反向设置即可

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