<div class="body"> <div class="progress_title"> <div class="title "><a href="#">3. Compose email</a></div> <div class="title "><a href="#">2. Choose contacts</a></div> <div class="title"><a href="#">1. Choose documents</a></div> </div> <div class="progress_title"> <div class="title "><a href="#">3. Compose email</a></div> <div class="title "><a href="#">2. Choose contacts</a></div> <div class="title active"><a href="#">1. Choose documents</a></div> </div> <div class="progress_title"> <div class="title "><a href="#">3. Compose email</a></div> <div class="title active"><a href="#">2. Choose contacts</a></div> <div class="title active"><a href="#">1. Choose documents</a></div> </div> <div class="progress_title"> <div class="title active"><a href="#">3. Compose email</a></div> <div class="title active"><a href="#">2. Choose contacts</a></div> <div class="title active"><a href="#">1. Choose documents</a></div> </div> </div>
.body{ background:#fff; } /* Main styles */ .progress_title{ height:38px; border:1px solid #e0e0e0; border-radius:4px; margin:20px; overflow:hidden; } .title{ float:right; width:33.333%; line-height:38px; padding:0; position:relative; } .title a{ color:#c7c2ba; font-weight:bold; padding:0 0 0 33px; text-decoration:none; } .title:last-child a{ padding:0 0 0 12px; } /* Active elemet */ .active{ background:#919394; color:#fff; z-index:5; } .active a{ color:#fff; } /* Border radius */ .title:last-child{ border-top-left-radius:4px; border-bottom-left-radius:4px; } .title:first-child{ border-top-right-radius:4px; border-bottom-right-radius:4px; } /* Arrows */ .title:before{ content: ""; display:block; width: 0px; height: 1px; border-top: 21px solid transparent; border-bottom: 20px solid transparent; border-left: 21px solid #e0e0e0; position:absolute; top:-2px;left:2px;right:auto; z-index:5; } .title:after{ content: ""; display:block; width: 0; height: 1px; border-top: 19px solid transparent; border-bottom: 18px solid transparent; border-left: 19px solid #fff; position:absolute; top:0;right:-21px; z-index:20; } .title:last-child:before{display:none;} .title.active:before{ content: ""; display:block; width: 0px; height: 1px; border-top: 21px solid transparent; border-bottom: 20px solid transparent; border-left: 21px solid #fff; position:absolute; top:-2px;right:-21px;left:auto; z-index:15; } .title.active:after{ content: ""; display:block; width: 0; height: 1px; border-top: 19px solid transparent; border-bottom: 18px solid transparent; border-left: 19px solid #919394; position:absolute; top:0;right:-19px; z-index:20; } .active:first-child:before{display:none;} .active:first-child:after{display:none;}