【css】反向圆角

效果类似于谷歌浏览器的tab，如图：

nav的结构代码（数据类型就是普通的list就不在这里赘述了）：

 <nav>
    <div
      :class="{ 'menu-item': true, 'activity': index == selectMenuIndex }"
      v-for="(menuInfo,index) in menuList"
      :key="index"
      @click="handelMenuClick(index)"
    >{{ menuInfo.title }}</div>
  </nav>

 方向圆角样式：

:root {
  font-size: 8px;
  --radius-size:4px;
  --acticity-color:black;
}

.menu-item {
  color: white;
  padding: 0.5rem 2rem;
  cursor: pointer;
  margin-right: 1rem;
  border-radius: 4px 4px 0 0;
  position: relative;
}

.menu-item.activity {
  background: var(--acticity-color) ;
}

.menu-item.activity::before,
.menu-item.activity::after {
  content: "";
  display: block;
  height: var(--radius-size);
  width: var(--radius-size);
  position: absolute;
  bottom: 0;
  background: radial-gradient(
    var(--radius-size) at var(--radius-size) 0px,
    transparent var(--radius-size),
    var(--acticity-color) var(--radius-size)
  );
}
.menu-item.activity::before {
  left: calc(-1 * var(--radius-size));
  transform: scaleX(-1);
}
.menu-item.activity::after {
  right: calc(-1 * var(--radius-size));
}

重点是使用径向渐变【radial-gradient】，原理是将镜像渐变的中心点放置于角落上，再使用透明色作为渐变的中央，再将剩余渐变部分用主色填充。