<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 class="breadcrumb"> <li class="completed"><a href="javascript:void(0);">about</a></li> <li class="active"><a href="javascript:void(0);">business</a></li> <li><a href="javascript:void(0);">gallery</a></li> </ul> </div> </div>

.breadcrumb { padding: 0px; background: transparent; list-style: none; overflow: hidden; margin-top: 20px; margin-bottom: 20px; border-radius: 4px; } .breadcrumb>li { display: table-cell; vertical-align: top; width: 1%; } .breadcrumb>li+li:before { padding: 0; } .breadcrumb li a { color: white; text-decoration: none; padding: 10px 0 10px 45px; position: relative; display: inline-block; width: calc( 100% - 10px ); background-color: hsla(0, 0%, 83%, 1); text-align: center; text-transform: capitalize; } .breadcrumb li.completed a { background: brown; background: hsla(153, 57%, 51%, 1); } .breadcrumb li.completed a:after { border-left: 30px solid hsla(153, 57%, 51%, 1); } .breadcrumb li.active a { background: #ffc107; } .breadcrumb li.active a:after { border-left: 30px solid #ffc107; } .breadcrumb li:first-child a { padding-left: 15px; } .breadcrumb li:last-of-type a { width: calc( 100% - 38px ); } .breadcrumb li a:before { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid white; position: absolute; top: 50%; margin-top: -50px; margin-left: 1px; left: 100%; z-index: 1; } .breadcrumb li a:after { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid hsla(0, 0%, 83%, 1); position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; }