如何使用 CSS 绘制具有特定样式的 Tabs（标签页）?-灵析社区
M78的社畜CSS 如何画出下面这种Tab 样式  右侧那个弧度，该如何画，还需要考虑z-index问题
我买了30万的鞋子
梯形tab按钮-基于clip-path path函数实现
.wrap {
background-color: #eee;
margin: 0 auto;
padding: 10px;
}
.tabs {
display: flex;
flex-direction: row-reverse;
align-items: start;
justify-content: start;
margin-left: 40px;
}
.tab {
flex-grow: 0;
width: 100px;
padding-right: 75px;
height: 50px;
cursor: pointer;
position: relative;
text-align: center;
line-height: 50px;
clip-path: path('M 0,0 L 100 0 C 125,0 125,50 175,50 L 0, 50 Z');
background-color: cyan;
margin-left: -40px;
}
.tab.active {
background-color: blue;
color: #fff;
}
.content-wrap {
min-height: 200px;
background-color: #fff;
}
// pass unocss options
window.__unocss = {
rules: [
// custom rules...
],
presets: [
// custom presets...
],
// ...
}
function initData() {
return {
activeIndex: 1,
onTabClick(index) {
this.activeIndex = index
}
}
}