<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.