<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="row"> <div class="col-xs-12"> <div class="wizard" style="text-align: center;"> <a class="done">Informations</a> <a class="done">Adresse</a> <a class="done">Société propriétaire</a> <a class="current">Equipe</a> <a>Photo et documents</a> <a>Surface et lots</a> <a>Portefeuilles</a> </div> </div> </div>

.wizard a { margin-top: 6px; padding: 10px 25px 10px; margin-right: 5px; background: #f8F8F8; position: relative; display: inline-block; text-decoration: none; color: #0c0973; } .wizard a:before { width: 0; height: 0; border-top: 20px inset transparent; border-bottom: 20px inset transparent; border-left: 10px solid #fff; position: absolute; content: ""; top: 0; left: 0; } .wizard a:after { width: 0; height: 0; border-top: 20px inset transparent; border-bottom: 20px inset transparent; border-left: 10px solid #F8F8F8; position: absolute; content: ""; top: 0; right: -10px; z-index: 2; } .wizard a:first-child:before, .wizard a:last-child:after { border: none; } .wizard a:first-child { -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; } .wizard a:last-child { -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; } .wizard .label { margin: 0 5px 0 18px; position: relative; top: -1px; } .wizard a:first-child .badge { margin-left: 0; } .wizard .current { background: #ff8600; color: #fff; } .wizard .current:after { border-left-color: #ff8600; } .wizard .done { background: #63687C; color: #fff; } .wizard .done:after { border-left-color: #63687C; }