How to make process steps - html

Question

I have problem with make process steps. It should look like this: http://imgur.com/a/fpMjy
I have problem with this "arrows", how to make border dashed?
How can I make to use different color on each step?
What I have:
.step > p {
margin: 0;
}
.step {
border: 1px solid #000;
text-align: center;
padding: 10px 10px 10px 30px;
min-width: 180px;
float: left;
position: relative;
background: #ebeef0;
}
.step:after,
.step:before {
content: " ";
position: absolute;
top: 0;
right: -17px;
width: 0;
height: 0;
border-top: 27px solid transparent;
border-bottom: 27px solid transparent;
border-left: 17px solid #ebeef0;
z-index: 2;
transition: border-color 0.2s ease;
}
.step:before {
border-top: 27px solid transparent;
border-bottom: 28px solid transparent;
border-left: 16px solid #000;
}
.actual-step {
background: #cfd6d9;
}
.actual-step:after {
border-left: 17px solid #cfd6d9;
}
.step-description {
font-size: 13px;
}
<div class="row text-center">
<div class="col-md-4 step actual-step">
<p class="step-number">Krok 1</p>
<p class="step-description">Podaj nazwę użytkownika</p>
</div>
<div class="col-md-4 step">
<p class="step-number">Krok 2</p>
<p class="step-description">Weryfikacja konta</p>
</div>
<div class="col-md-4 step">
<p class="step-number">Krok 3</p>
<p class="step-description">Zakończenie rejestracji</p>
</div>
</div>
https://jsfiddle.net/100dLq22/

Answer 1

.step > p {
margin: 0;
}
.step {
border: 1px dashed #000;
text-align: center;
padding: 10px 10px 10px 30px;
min-width: 180px;
float: left;
position: relative;
background: #ebeef0;
}
.step:after {
content: "";
position: absolute;
top: 9px;
right: -20px;
width: 40px;
transform: rotate(45deg);
height: 40px;
background-color: #ebeef0;
border-top: 1px dashed black;
border-right: 1px dashed black;
transition: border-color 0.2s ease;
}
.actual-step {
background: #cfd6d9;
}
.actual-step:after {
background-color: #cfd6d9;
}
.step-description {
font-size: 13px;
}
#step1:after {
z-index: 2;
}
#step2:after {
z-index: 4;
}
<div class="row text-center">
<div class="col-md-4 step actual-step" id="step1">
<p class="step-number">Step 1</p>
<p class="step-description">Etiam ullamcorper.</p>
</div>
<div class="col-md-4 step" id="step2">
<p class="step-number">Step 2</p>
<p class="step-description">Etiam ullamcorper.</p>
</div>
<div class="col-md-4 step">
<p class="step-number">Step 3</p>
<p class="step-description">Etiam ullamcorper.</p>
</div>
</div>