html梯形选项卡,css 梯形tab标签页

现在越来越时尚化，tab标签页已经不像原来的那么传统格式化了，现在给大家实现一个简约美观的tab标签页

比较简约的梯形tab

Document

.nav{

display: flex;

width: 300px;

align-items: flex-end;

}

.nav .item{

flex: 1;

height: 40px;

background: #eee;

border-radius: 5px 5px 0 0;

position: relative;

list-style: none;

}

.nav .item.active{

height: 45px;

background: orange;

}

.nav .item:first-child:before{

content: '';

display: none;

width: 10px;

height: 100%;

background: orange;

position: absolute;

right: -5px;

top: 0;

z-index: 10;

border-radius: 0 5px 0 0;

transform: skew(10deg);

}

.nav .item:first-child.active:before{

display: block;

}

.nav .item:last-child:before{

content: '';

display: none;

width: 10px;

height: 100%;

background: orange;

position: absolute;

left: -5px;

top: 0;

z-index: 10;

border-radius: 5px 0 0 0;

transform: skew(-10deg);

}

.nav .item:last-child.active:before{

display: block;

}

document.querySelector('.nav').addEventListener('click',function(e){

if(e.target.nodeName=='LI'){

var item = document.querySelectorAll('.item');

for(var i = 0; i < item.length; i++){

item[i].className = 'item';

}

e.target.className = 'item active';

}

})

以上就可以实现漂亮tab标签页，不像传统的梯形tab那样，有更好的意见或者建议欢迎留言~

本文章为原创文章，转发请注明出处，谢谢!

标签：tab,梯形,item,nav,5px,display,css,before

来源： https://blog.csdn.net/p_pppxxxxmmm/article/details/106764545