CSS实现向外圆角过渡

实现类似标签向外圆角过渡，实现效果如下：

大致画了个原理图，主要靠伪元素的径向渐变，圆心设置于一个顶点，在分界线两遍分别设置透明色和选中效果颜色。

然后建立两个伪元素，通过定位和变换，一个放在上边，一个放在下边，就实现了这个效果。

具体代码如下：

<div class="nav">首页</div>
<div class="nav navActive">页面一</div>
<div class="nav">页面二</div>

:root {
  --radius-size:6px;
  --acticity-color:#fff;
}

.navActive{
  background-color: #fff;
  color: rgb(0,63,136);
  position: relative;
}

.navActive::before,
.navActive::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)
  );
}

.navActive::before {
  right: 0;
  bottom: calc(-1 * var(--radius-size));
  transform: scale(-1);
}

.navActive::after {
  right: 0;
  top:calc(-1 * var(--radius-size));
  transform: scaleX(-1);
}

如果要实现横向的效果，只需要对两个伪元素进行相应的transform即可。