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的样式。