title: How to make process steps
body: <p>I have problem with make process steps. It should look like this: <a href="https://imgur.com/a/fpMjy" rel="nofollow noreferrer">http://imgur.com/a/fpMjy</a></p>
  
  <p>I have problem with this "arrows", how to make border dashed?</p>
  
  <p>How can I make to use different color on each step?</p>
  
  <p>What I have:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>      .step &gt; 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;
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>      &lt;div class="row text-center"&gt;
              &lt;div class="col-md-4 step actual-step"&gt;
                  &lt;p class="step-number"&gt;Krok 1&lt;/p&gt;
                  &lt;p class="step-description"&gt;Podaj nazwę użytkownika&lt;/p&gt;
              &lt;/div&gt;
              
              &lt;div class="col-md-4 step"&gt;
                  &lt;p class="step-number"&gt;Krok 2&lt;/p&gt;
                  &lt;p class="step-description"&gt;Weryfikacja konta&lt;/p&gt;
              &lt;/div&gt;
              
              &lt;div class="col-md-4 step"&gt;
                  &lt;p class="step-number"&gt;Krok 3&lt;/p&gt;
                  &lt;p class="step-description"&gt;Zakończenie rejestracji&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
    </code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/100dLq22/" rel="nofollow noreferrer">https://jsfiddle.net/100dLq22/</a></p>