如何制作流程步骤

Question

我在制作流程步骤时遇到问题。它应该如下所示：http://imgur.com/a/fpMjy

我对这个“箭头”有问题，如何使边框破碎？

如何在每一步使用不同的颜色？

我有什么：

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