HTML/CSS - creating an "arrow" on one side of a DIV - html

Question

I am transforming a div to give it a point on one end like an arrow. I've accomplished this using a second div and a CSS transform to rotate its borders 45 degrees. My issue is the background on the original div bleeds through and still forms a square. How can I solve this issue? I've created a fiddle at the below link, I would like the blue background of "Step 1" to end in the point instead of the flat edge. Thank you. Fiddle
<ul class="progress">
<li class="completed">
<span>
<span class="order">1 </span>Step 1
</span>
<div class="diagonal"></div>
</li>
<li>
<span>
<span class="order">2 </span>Step 2
</span>
<div class="diagonal"></div>
</li>
<li>
<span>
<span class="order">3 </span>Step 3
</span>
</li>
</ul>
CSS:
.progress {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
height: 40px;
margin: 0 0 1em;
padding: 0;
}
.progress > li {
width: 100% !important;
height: 100% !important;
border-radius: 0 !important;
color: #fff !important;
list-style: none;
font-size: 16px;
z-index: 100;
background-color: #bbb;
overflow: hidden;
}
.progress > li:last-child {
border-right: 0;
}
.progress > li.completed {
background-color: #0071bc;
}
.progress > li span {
position: relative;
top: 5px;
}
.progress > li span .order {
display: inline-block;
border: 2px solid #555;
border-radius: 27px;
width: 27px;
height: 27px;
background-color: #fff;
color: #555;
margin: 0 5px 0 10px;
font-weight: bold;
text-align: center;
position: relative;
top: -1px;
line-height: 25px;
}
.diagonal {
width: 28px;
height: 28px;
position: relative;
float: right;
top: -7px;
}
.diagonal:after {
content: "";
position: absolute;
border-top: 2px solid #f5f5f5;
border-right: 2px solid #f5f5f5;
width: 38px;
height: 38px;
transform: rotate(45deg);
transform-origin: 0% 0%;
}

Answer 1

You can make a right arrow/triangle like that by setting a transparent top and bottom border, then give a left border of the color you want the arrow to be. Then style it so it works with your layout.
.progress {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
height: 40px;
margin: 0 0 1em;
padding: 0;
}
.progress > li {
width: 100% !important;
height: 100% !important;
border-radius: 0 !important;
color: #fff !important;
list-style: none;
font-size: 16px;
background-color: #bbb;
position: relative;
}
.progress > li:last-child {
border-right: 0;
}
.progress > li.completed {
background-color: #0071bc;
}
.progress > li:not(.completed) {
padding-left: 20px;
}
.progress > li span {
position: relative;
top: 5px;
}
.progress > li span .order {
display: inline-block;
border: 2px solid #555;
border-radius: 27px;
width: 27px;
height: 27px;
background-color: #fff;
color: #555;
margin: 0 5px 0 10px;
font-weight: bold;
text-align: center;
position: relative;
top: -1px;
line-height: 25px;
}
.diagonal {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #bbb;
top: 0; right: 0;
position: absolute;
transform: translateX(100%);
z-index: 1;
}
.completed .diagonal {
border-left-color: #0071bc;
}
<ul class="progress">
<li class="completed">
<span>
<span class="order">1 </span>Step 3
</span>
<div class="diagonal"></div>
</li>
<li>
<span>
<span class="order">2 </span>Step 2
</span>
<div class="diagonal"></div>
</li>
<li>
<span>
<span class="order">3 </span>Step 3
</span>
</li>
</ul>