CSS 如何实现曲边导航栏？

Question

CSS 如何实现曲边导航栏？

仓乃文 · Accepted Answer

曲边导航栏通过 border-radius 和伪元素在激活标签两侧创建内凹曲线，实现类似 Chrome 标签页的曲边效果。

```css
.nav-tab {
  position: relative;
  display: flex;
  background: #f0f0f0;
  border-radius: 10px 10px 0 0;
  padding: 10px 20px;
}

.nav-tab.active {
  background: #fff;
}

.nav-tab.active::before,
.nav-tab.active::after {
  content: ";
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 10px;
  background: #f0f0f0;
}

.nav-tab.active::before {
  left: -10px;
  border-radius: 0 0 10px 0;
}

.nav-tab.active::after {
  right: -10px;
  border-radius: 0 0 0 10px;
}
```

补充说明：
- 伪元素在激活标签两侧创建圆角矩形，模拟内凹曲线
- 伪元素背景色与导航栏背景色一致，形成视觉上的曲线
- 适合标签页切换、分类导航等场景
- 进阶：可配合 clip-path 实现更复杂的曲线形状