vue3 使用css实现一个弧形选中角标样式
.tabs {
margin-top: 50px;
display: flex;
justify-content: center;
align-items: center;
.tab {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
width: 150px;
height: 40px;
border-radius: 10px 10px 0 0;
position: relative;
background: #ccc;
&.active {
background: #e74d5c;
&::after {
content: "";
position: absolute;
width: 15px;
height: 15px;
bottom: 0;
z-index: 1;
}
}
&:first-child {
&::after {
right: -15px;
background: radial-gradient(circle at 15px 0, transparent 15px, #e74d5c 15px);
}
}
&:last-child {
&::after {
left: -15px;
background: radial-gradient(circle at 0px 0, transparent 15px, #e74d5c 15px);
}
}
}
}