HTML:
 

<header>
    <a href="#" class="index" id="index">Index</a>
    <a href="#" class="news">Class</a>
    <i class="news-right"></i>
    <a href="#" class="art">Article</a>
    <i class="art-right"></i>
</header>

 
CSS:

/*header*/
header{
background:#587CA9;
height:50px;
overflow: hidden;}

header a{display:inline-block;
height:48px;
line-height:48px;
color:#fff;
text-align:center;}

header .index{width:200px;
background:#32528D;
font-size: 20px;}

header .news{width:100px;
background: -webkit-linear-gradient(left,#577BA8,#32528D);}

header .art{width:70px;
background: -webkit-linear-gradient(left,#577BA8,#32528D);}

header .news-right,header .art-right{
position:absolute;
top:2px;
display: inline-block;
width:0;
height:0;
border:24px solid transparent;
border-left:18px solid #32528D;}

header .news-right{left:304px;}

header .art-right{left:378px;}