CSS for step wizard - html

Question

I am new to CSS and I need help to develop step wizard as displayed below. Please provide me pointers to the same.
Here is the sample code that I have tried: https://jsfiddle.net/61peq3d6/1/
.wizard li {
background-color: #fff;
border: solid black 3px;
border-radius: 5px;
display: inline;
padding: 10px 30px 10px 40px;
margin-right: -7px;
width: auto;
color: teal;
}
.wizard li::before,
.wizard li::after {
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
border-color: transparent;
border-left-color: #000;
border-radius: 10px;
}
.wizard li::before {
border-width: 25px;
margin-top: -16px;
margin-left: 84px;
}
.wizard li::after {
border-left-color: #fff;
border-width: 21px;
margin-top: -12px;
margin-left: 24px;
}
.wizard li.selected {
background-color: black;
color: #fff;
}
.wizard li.selected::after {
border-left-color: black;
}
.wizard li:last-child::after {
border-left-color: transparent;
}
<ul class="wizard">
<li>Passo 1</li>
<li class="selected">Passo 2</li>
<li>Passo 3</li>
<li>Passo 4</li>
<li>Fim</li>
</ul>
I am facing issue in aligning the arrow kind of sign.

Answer 1

Got the answer: DEMO
HTML CODE:
<div class="form-wizard centered-pills">
<ul class="nav nav-pills">
<li role="presentation" class="completed">1. Contact Information</li>
<li role="presentation" class="current">2. Product Information</li>
<li role="presentation" >3. Confirmation</li>
</ul>
</div>
CSS:
.form-wizard {
margin: 0 auto;
display: block;
margin-bottom: 25px;
}
.form-wizard .nav li {
box-shadow: 0 5px 3px -3px #ddd;
}
.form-wizard .nav li + li {
margin-left: 0;
}
.form-wizard .nav li:first-child a {
padding-left: 10px;
}
.form-wizard .nav li:last-child a {
border-right: 1px solid #000;
}
.form-wizard .nav li:last-child:after, .form-wizard .nav li:last-child:before {
border-width: 0;
}
.form-wizard .nav li:last-child:hover:after, .form-wizard .nav li:last-child:hover:before {
border-width: 0;
}
.form-wizard .nav li:last-child:hover a {
border-right: 1px solid #000;
}
.form-wizard .nav li a {
border-radius: 0;
padding-left: 30px;
background: #fff;
border: 1px solid #000;
color: teal;
border-right: 0;
}
.form-wizard .nav li a:hover, .form-wizard .nav li a:active, .form-wizard .nav li a:focus {
background: teal;
color: white;
}
.form-wizard .nav li:after, .form-wizard .nav li:before {
content: "";
border-color: transparent transparent transparent #000;
border-style: solid;
border-width: 20px;
position: absolute;
display: block;
top: 0;
z-index: 1;
}
.form-wizard .nav li:after {
border-left-color: #fff;
top: 1px;
right: -39px;
}
.form-wizard .nav li:before {
border-width: 21px;
right: -41px;
}
.form-wizard .nav li.completed a {
border-radius: 0;
padding-left: 30px;
background: #fff;
border: 1px solid #000;
border-right: 0;
color: teal;
cursor: pointer;
}
.form-wizard .nav li.completed:after, .form-wizard .nav li.completed:before {
content: "";
border-color: transparent transparent transparent #000;
border-style: solid;
border-width: 20px;
position: absolute;
display: block;
top: 0;
right: -40px;
z-index: 1;
}
.form-wizard .nav li.completed:after {
border-left-color: #fff;
top: 1px;
right: -39px;
}
.form-wizard .nav li.completed:before {
border-width: 21px;
right: -41px;
}
.form-wizard .nav li.current a {
border-radius: 0;
padding-left: 30px;
background: #000;
border: 1px solid #000;
border-right: 0;
color: white;
cursor: pointer;
}
.form-wizard .nav li.current:after, .form-wizard .nav li.current:before {
content: "";
border-color: transparent transparent transparent #000;
border-style: solid;
border-width: 20px;
position: absolute;
display: block;
top: 0;
right: -40px;
z-index: 1;
}
.form-wizard .nav li.current:after {
border-left-color: #000;
top: 1px;
right: -39px;
}
.form-wizard .nav li.current:before {
border-width: 21px;
right: -41px;
}
.form-wizard .nav li.current:last-child a {
border-right: 1px solid #000;
}
.form-wizard .nav li.current:last-child:after, .form-wizard .nav li.current:last-child:before {
border-width: 0;
}
.form-wizard .nav li.current:last-child:hover:after, .form-wizard .nav li.current:last-child:hover:before {
border-width: 0;
}
.form-wizard .nav li.current:last-child:hover a {
border-right: 1px solid #000;
}