淘先锋技术网

首页 1 2 3 4 5 6 7

CSS可以实现多种样式的tab,其中包括不规则tab。通过设置tab的padding、border-radius以及z-index等属性,可以轻松地实现独特的tab样式。以下是一个使用CSS实现不规则tab的例子:

/* CSS代码 */
.tabs {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30px;
}
.tab {
position: relative;
margin: 0 10px;
padding: 8px 25px;
background-color: #fff;
border-radius: 0 30px 30px 0;
border: 2px solid #000;
cursor: pointer;
z-index: 1;
}
.tab:before {
content: "";
position: absolute;
top: 0;
left: -20px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #000;
z-index: -1;
}
.tab:first-of-type {
border-radius: 30px 0 0 30px;
}
.tab:first-of-type:before {
display: none;
}
.tab.active {
background-color: #000;
color: #fff;
}
.tab.active:before {
border-left-color: #fff;
}

首先,我们创建一个包含多个tab的容器,并使用flex布局使其水平排列且中间有间隔。每个tab都被设置为相对定位,并具有一定的内边距和圆角边框。我们使用伪元素:before来添加tab左侧的三角形元素,并设置z-index为-1使其位于tab下方。在:hover或:focus时,tab可以更改颜色和边框样式。最后,使用.active类来设计选中的tab的样式。