html5 箭头形状导航条,css实现带箭头的导航条

​​​​要实现这种导航条，首先要知道箭头是怎么做出来。

http://www.cnblogs.com/daxiong/articles/3158630.html

​这里说了用css做箭头的原理和实现。

知道怎么做箭头后，实现起来就很简单了。

我用css伪类:before和 :after实现箭头,

.left:before,.right:before {

position: absolute;

content: "";

width: 0;

height: 0;

border-width: 20px;

border-style: solid;

border-color: transparent

transparent transparent #1E97EC;

left: 1px;

}

.left:after,.right:after {

position: absolute;

content: "";

width: 0;

height: 0;

border-width: 20px;

border-style: solid;

border-color: transparent

transparent transparent #FFF;

left:

-1px;

}

​这样就有前后箭头了，接着只要微调一下就可以了。

​第一个和最后一个，只要把对应的div去掉

(.left或者.right)，再加个border-left，或者border-right就可以了

​以下是代码

css :

.nav-item {

border-top: 1px solid #1E97EC;

border-bottom: 1px solid #1E97EC;

width: 200px;

height: 38px;

line-height: 38px;

text-align: center;

display: inline-block;

position: relative;

margin-right: 20px;

cursor: pointer;

}

.left,.right {

position: absolute;

top: -1px;

}

.left {

left: 0px;

}

.right {

right: 1px;

}

.left:before,.right:before {

position: absolute;

content: "";

width: 0;

height: 0;

border-width: 20px;

border-style: solid;

border-color: transparent

transparent transparent #1E97EC;

left: 1px;

}

.left:after,.right:after {

position: absolute;

content: "";

width: 0;

height: 0;

border-width: 20px;

border-style: solid;

border-color: transparent

transparent transparent #FFF;

left:

-1px;

}

.nav-left {

border-left: 1px solid #1E97EC;

}

.nav-right {

border-right: 1px solid #1E97EC;

}

.no-permission {

background-color: rgba(0,0,0, .6);

}

.nav .active {

background-color: rgba(30, 151, 236, 0.6);;

}

.nav .active .right:after {

border-color: transparent transparent transparent rgb(120, 192,

243);

}

​html:

你好

你好

你好

你好

你好

​js:

$('.nav-item').on('click',function(){

if(!$(this).hasClass('no-permission')){

$(this).addClass("active").siblings('.nav-item').removeClass('active');

}

})

​