如何制作选中项带凸起曲线的自定义底部Navbar？

方案1：CSS Clip-path（首推） #

• 实现逻辑：直接给选中的导航项元素添加clip-path属性，通过自定义多边形路径实现凸起效果，无需额外DOM容器。
  示例代码：

  .nav-item.active {
    clip-path: polygon(0 0, 100% 0, 100% 80%, 90% 100%, 10% 100%, 0 80%);
    background-color: #your-active-bg-color;
    padding-bottom: 12px; /* 调整数值控制凸起高度 */
  }
  

• 优势：完全符合你「单个元素呈现效果」的需求，无冗余DOM，代码简洁，性能拉满，适配绝大多数现代浏览器。
• 劣势：路径数值需要手动微调来匹配你的视觉需求，但针对简单凸起曲线，调试成本极低。

方案2：CSS伪元素（::after/::before） #

• 实现逻辑：给选中的导航项添加定位伪元素，利用border-radius绘制底部圆润凸起，与主元素背景色保持一致形成整体效果。
  示例代码：

  .nav-item.active {
    position: relative;
    background-color: #your-active-bg-color;
    padding-bottom: 0;
  }
  .nav-item.active::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 10%;
    width: 80%;
    height: 10px;
    border-radius: 50% 50% 0 0;
    background-color: #your-active-bg-color;
  }
  

• 优势：能实现更圆润的弧形凸起，样式调整灵活，同样无需额外容器。
• 劣势：需要处理伪元素的定位逻辑，避免与Navbar外的元素重叠，但调试难度不大。

方案3：额外容器（你当前的实现） #

• 实现逻辑：用外层容器包裹导航项，通过容器的边框、背景或裁剪实现凸起。
• 优势：早期浏览器兼容性稍好（目前主流浏览器对前两种方案支持已无问题，该优势可忽略）。
• 劣势：增加不必要的DOM层级，代码冗余，不符合你「单个元素呈现效果」的需求，后续维护成本更高。

选择建议 #

优先用CSS Clip-path方案，完美匹配你的需求，是最轻量化的实现方式。如果需要更圆润的弧形凸起，再考虑伪元素方案。你当前的容器方案不推荐，属于冗余实现。

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