Wie man Prozessschritte macht

Question

Ich habe ein Problem mit make Prozessschritte. Es sollte so aussehen: http://imgur.com/a/fpMjy

Ich habe ein Problem mit diesem "Pfeile", wie man Grenze gestrichelt machen?

Wie kann ich verschiedene Farben für jeden Schritt verwenden?

Was ich habe:

 .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>