<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <ul > <li><a href="">home</a></li> <li><a href="">about</a></li> <li><a href="" class="topi">services</a></li> <li><a href="" class="lft">gallery</a></li> <li><a href="" class="btm">testimonials</a></li> <li><a href="" class="menu">contact</a></li> </ul> </div> </div>

ul {margin:20px;padding:0;position:relative;} ul li a { padding:10px 20px; display:inline-block; background:blue;color:white;text-decoration:none;} ul li {float:left; list-style:none; margin-right:10px; position:relative;} ul li a.menu:after{ content: ''; display: block; position: absolute; right: -20px; top: 50%; margin-top: -10px; border-top: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid blue; } ul li a.btm:after{ content: ''; display: block; position: absolute; top:100%; left:50%; border-top: 10px solid blue; border-right: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid transparent; } ul li a.lft:after{ content: ''; display: block; position: absolute; top:50%; left:-20px; margin-top:-10px; border-top: 10px solid transparent; border-right: 10px solid blue; border-bottom: 10px solid transparent; border-left: 10px solid transparent; } ul li a.topi:before{ content: ''; display: block; position: absolute; top:-20px; left:30%; border-top: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid blue; border-left: 10px solid transparent; }