A Pen by Jon Pascoe.

index.html

<div class='steps'>
  <!-- steps must be on a single line to avoid unwanted whitespace -->
  <div class='step complete'>Step 1</div><div class='step active'>Step 2</div><div class='step'>Step 3</div><div class='step'>Step 4</div>
</div>

Pure-CSS-process-steps.markdown

Pure CSS process steps

A pure CSS implementation of arrowed steps with distinct states for complete / active / and pending steps. A drop-shadow provides clear visual indication on the currently active step.

A Pen by Jon Pascoe on CodePen.

License.

style.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
  font-family: 'Open Sans', sans-serif;
}

.steps {
  position: relative;
  text-align: center;
  margin-top: 50px;
}

.step {
  display: inline-block;
  position: relative;
  line-height: 30px;
  padding: 0 25px 0 40px;
  background-color: lightgrey;
  vertical-align: top;
  overflow: hidden;
  border-color: darkgrey;
  border-style: solid;
  border-width: 1px 0;
}
.step:before {
  content: '';
  display: block;
  position: absolute;
  top: 4px;
  left: -11px;
  background: lightgrey;
  border-top: 1px solid darkgrey;
  border-right: 1px solid darkgrey;
  -webkit-box-shadow: 0 0 10px darkgrey;
          box-shadow: 0 0 10px darkgrey;
  width: 22px;
  height: 22px;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
.step.complete {
  overflow: hidden;
}
.step.active {
  background: white;
  -webkit-box-shadow: 0 0 10px #767676;
          box-shadow: 0 0 10px #767676;
  overflow: visible;
  border-color: #767676;
}
.step.active:before {
  border-color: #767676;
  -webkit-box-shadow: inset -10px 10px 5px -5px #c6c6c6, inset 10px -10px 20px lightgrey;
          box-shadow: inset -10px 10px 5px -5px #c6c6c6, inset 10px -10px 20px lightgrey;
}
.step.active + .step:before {
  background: white;
  border-color: #767676;
  -webkit-box-shadow: 0 0 10px #767676;
          box-shadow: 0 0 10px #767676;
}
.step:first-of-type {
  padding-left: 20px;
  border-left-width: 1px;
}
.step:first-of-type:before {
  display: none;
}
.step:last-of-type {
  border-right-width: 1px;
}

vuyBE.markdown

vuyBE

A Pen by Jon Pascoe on CodePen.

License.