效果类似于谷歌浏览器的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】,原理是将镜像渐变的中心点放置于角落上,再使用透明色作为渐变的中央,再将剩余渐变部分用主色填充。