<div class="box">
  <div class="left"></div>
  <div class="right"></div>
  <div class="bottom"></div>
  Step 1
</div>

<div class="box">
  <div class="left"></div>
  <div class="right"></div>
  <div class="bottom"></div>
  Step 2
</div>

<div class="box">
  <div class="left"></div>
  <div class="right"></div>
  <div class="bottom"></div>
  Step 3
</div>

<div class="box">
  <div class="left"></div>
  <div class="right"></div>
  <div class="bottom"></div>
  Step 4
</div>

<div class="box">
  <div class="left"></div>
  <div class="right"></div>
  <div class="bottom"></div>
  Step 5
</div>
body {
  padding: 50px;
  background: linear-gradient(
    to bottom right,  
    #2C3E50, #FD746C, 
    #FF8235, #ffff1c, 
    #92FE9D, #00C9FF, 
    #a044ff, #e73827);
  background-repeat: no-repeat;
  background-size: 1000% 1000%;
  animation: gradient 120s ease infinite;
  height: 100%;
}
@keyframes gradient { 
  0%{background-position:0% 0%}
  50%{background-position:50% 50%}
  100%{background-position:0% 0%}
}
.box {
  height: 50px;
  width: 100px;
  background: #333;
  margin: 5px;
  margin-left: 50px;
  float: left;
  position: relative;
  text-align: center;
  line-height: 50px;
  color: #fff;
  z-index: 2;
}

.box .left {
  position: absolute;
  left: -30px;
  top: 0;
  content: '';
  height: 0;
  width: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 30px solid #333;
  border-right: 30px solid transparent;
  transform: rotate(90deg);
}

.box .right {
  position: absolute;
  left: -30px;
  bottom: 0;
  content: '';
  height: 0;
  width: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 30px solid transparent;
  border-right: 30px solid #333;
  transform: rotate(90deg);
}

.box .bottom {
  position: absolute;
  right: -50px;
  top: 0%;
  content: '';
  height: 0;
  width: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 25px solid transparent;
  border-right: 25px solid #333;
  transform: rotate(180deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.