<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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <ul class="custom-breadcrumb"> <li class="light-blue-crumb">Approved</li> <li class="faded-crumb">Confirmed</li> <li class="blue-crumb current">Matched</li> <li class="gray-crumb">Settled</li> </ul> </div> </div>

.custom-breadcrumb{ list-style:none; overflow: hidden; } .custom-breadcrumb li { text-decoration: none; padding: 10px 0 10px 50px; position: relative; display: block; float: left; } .custom-breadcrumb li:after { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; } .custom-breadcrumb li: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; } .blue-crumb{ background-color: #2980b9; color: white; } .blue-crumb:after{ border-left:30px solid #2980b9; } .gray-crumb{ background-color: #bdc3c7; } .gray-crumb:after{ border-left: 30px solid #bdc3c7; } .light-blue-crumb:after{ border-left:30px solid #3498db; } .light-blue-crumb{ background: #3498db; color: white; } .faded-crumb:after{ border-left:30px solid #ecf0f1; } .faded-crumb{ background: #ecf0f1; color: #95a5a6; } .current { } .row{ padding: 30px; }