Custom Progress Bar for Wizards

A custom progess bar for wizards using only HTML and CSS.

HTML

<div style="display: flex">
  <div class="step">
    Schritt 1
  </div>
  <div class="step active">
    Schritt 2
  </div>
  <div class="step">
    Schritt 3
  </div>
</div>

CSS

.step {
  -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  
  background: red;
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.step.active {
  background: orange;
}