Create a border on a triangle - html

Question

I would like to apply just a border on the arrow (not the div) that is after each list element. Currently they are white and not visible in this fiddle.
https://jsfiddle.net/smks/faadd5r5/
HTML:
<div class="content">
<div class="steps-container">
<ol class="steps">
<li class="step step1 current">
<div class="step-content">
<div class="step-number step-number-first">1</div>
<span class="step-details">Step 1</span>
</div>
</li>
<li class="step step2 ">
<div class="step-content">
<div class="step-number">2</div>
<span class="step-details">Step 2</span>
</div>
</li>
<li class="step step3 ">
<div class="step-content">
<div class="step-number">3</div>
<span class="step-details">Step 3</span>
</div>
</li>
<li class="step step4 ">
<div class="step-content">
<div class="step-number">4</div>
<span class="step-details">Step 4</span>
</div>
</li>
</ol>
</div>
</div>
CSS:
.steps-container {
background-color: #ffffff;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
background-clip: padding-box;
float: left;
height: 52px;
margin: 0;
width: 100%;
}
.steps-container ol.steps {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
background-clip: padding-box;
counter-reset: li;
font-size: 9px;
font-size: 0.9rem;
line-height: 10px;
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
}
.steps-container ol.steps .step {
box-sizing: border-box;
height: 52px;
width: 25%;
}
.steps-container ol.steps li {
list-style-image: none;
list-style-type: none;
margin-left: 0;
text-align: center;
color: #c7c7c7;
padding-top: 4px;
background-color: #ffffff;
position: relative;
}
.steps-container ol.steps li:after {
position: absolute;
top: -16px;
left: 100%;
content: " ";
height: 0;
width: 0;
pointer-events: none;
border: solid transparent;
border-left-color: #ffffff;
border-width: 26px 10px;
margin-top: 16px;
-webkit-filter: drop-shadow(5px 0 2px #f2f2f2);
-moz-filter: drop-shadow 5px 0 2px #f2f2f2;
-ms-filter: drop-shadow 5px 0 2px #f2f2f2;
-o-filter: drop-shadow 5px 0 2px #f2f2f2;
filter: drop-shadow 5px 0 2px #f2f2f2;
}
.steps-container ol.steps li:first-child {
margin-left: 0;
}
.steps-container ol.steps li:first-child .step-details:after {
border: none;
}
.steps-container ol.steps li:last-child:after {
border-width: 0;
}
.steps-container ol.steps li .step-content {
display: block;
padding: 2px;
margin-top: 10px;
}
.steps-container ol.steps li .step-content:before {
counter-increment: li;
}
.steps-container ol.steps > li {
float: left;
}
.steps-container ol.steps .step-number {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
background-clip: padding-box;
background-color: grey;
color: #ffffff;
height: 16px;
width: 16px;
text-align: center;
margin: 0 auto;
float: left;
line-height: 15px;
margin-left: 15px;
}
.steps-container ol.steps li.current {
color: #ffffff;
background-color: grey;
}
.steps-container ol.steps li.current .step-number {
background-color: #ffffff;
color: #565656;
}
.steps-container ol.steps li.current:after {
border-left-color: grey;
}
.steps-container ol.steps li.current:before {
-webkit-filter: drop-shadow(0 0 0 transparent);
-moz-filter: drop-shadow 0 0 0 transparent;
-ms-filter: drop-shadow 0 0 0 transparent;
-o-filter: drop-shadow 0 0 0 transparent;
filter: drop-shadow 0 0 0 transparent;
}
.steps-container li.step1 {
z-index: 3;
}
.steps-container li.step2 {
z-index: 2;
}
.steps-container li.step3 {
z-index: 1;
}
.steps-container li.step4 {
z-index: 0;
}
#media screen and (max-width: 767px) {
.step-number-first {
margin-left: 8px;
}
}
#media screen and (min-width: 768px) {
.steps-container {
height: 64px;
}
.steps-container ol.steps {
font-size: 20px;
font-size: 2rem;
}
.steps-container ol.steps .step {
height: 64px;
}
.steps-container ol.steps .step-number {
font-size: 22px;
font-size: 2.2rem;
font-size: 22px;
left: 10px;
height: 36px;
line-height: 36px;
position: absolute;
top: 15px;
width: 36px;
}
.steps-container ol.steps li {
text-align: left;
}
.steps-container ol.steps li .step-content {
margin-top: 20px;
}
.steps-container ol.steps li .step-details {
margin-left: 65px;
}
.steps-container ol.steps li:after {
border-width: 32px 15px;
}
}
I don't want to go down the route of rotating 45 degrees.

Answer 1

DROP-SHADOW TECHNIQUE
The typical method of creating triangles in CSS (and the same method you're using) is to use the border trick. Using that technique, there are several approaches which can get you pretty close to what you want. This is the approach that I consider to be the simplest.
filter: drop-shadow(5px 0 0 #000);
By applying an un-blurred drop shadow with a bit of an offset, we can create a border on the right edge. Note that this technique uses the drop-shadow filter rather than a box-shadow (because box-shadow wouldn't properly wrap to the triangle), and therefore some vendor prefixing is required for acceptable browser support.
DEMO
Here's a runnable demo including vendor prefixes and proper cropping. If anything doesn't look right, let me know and I'll fix it.
This could be done without the wrapper element (just remove wrapper div and the margins on the child element), but it would have a small gap near the top and bottom corners of the triangle.
.triangle_wrapper {
/* crop out the edges to remove the undesired gap */
height: 40px;
overflow: hidden;
}
.triangle-right {
/* give a little offset, so the wrapper can crop it properly */
margin-top: -5px;
margin-left: -5px;
/* border-hack triangles need no width or height */
width: 0;
height: 0;
/* this makes the triangle */
border-left: 25px solid #ff0000;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
/* this adds the border */
filter: drop-shadow(5px 0 0 #000);
-webkit-filter: drop-shadow(5px 0 0 #000);
filter: progid: DXImageTransform.Microsoft.Shadow(Strength=0, offX=5px, offY=0px, Color='#000000');
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=0, offX=5px, offY=0px, Color='#000000')";
}
<div class="triangle_wrapper">
<div class="triangle-right"></div>
</div>

Answer 2

Try this:
CSS
.steps-container {
background-color: #ffffff;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
background-clip: padding-box;
float: left;
height: 52px;
margin: 0;
width: 100%;
}
.steps-container ol.steps {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
background-clip: padding-box;
counter-reset: li;
font-size: 9px;
font-size: 0.9rem;
line-height: 10px;
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
}
.steps-container ol.steps .step {
box-sizing: border-box;
height: 52px;
width: 25%;
}
.steps-container ol.steps li {
list-style-image: none;
list-style-type: none;
margin-left: 0;
text-align: center;
color: #c7c7c7;
padding-top: 4px;
background-color: #ffffff;
position: relative;
padding-left: 16px;
}
.steps-container ol.steps li:after {
position: absolute;
top: -16px;
left: 100%;
content: " ";
height: 0;
width: 0;
pointer-events: none;
border: solid transparent;
border-left-color: #ffffff;
border-width: 26px;
margin-top: 16px;
-webkit-filter: drop-shadow(5px 0 2px #f2f2f2);
-moz-filter: drop-shadow 5px 0 2px #f2f2f2;
-ms-filter: drop-shadow 5px 0 2px #f2f2f2;
-o-filter: drop-shadow 5px 0 2px #f2f2f2;
filter: drop-shadow 5px 0 2px #f2f2f2;
}
.steps-container ol.steps li:before {
position: absolute;
top: -16px;
left: 100%;
content: " ";
height: 0;
width: 0;
pointer-events: none;
border: solid transparent;
border-left-color: #808080;
border-width: 28px;
margin-top: 22px;
margin-top: 14px;
}
.steps-container ol.steps li:first-child {
margin-left: 0;
}
.steps-container ol.steps li:first-child .step-details:after {
border: none;
}
.steps-container ol.steps li:last-child:after {
border-width: 0;
}
.steps-container ol.steps li .step-content {
display: block;
padding: 2px;
margin-top: 10px;
}
.steps-container ol.steps li .step-content:before {
counter-increment: li;
}
.steps-container ol.steps > li {
float: left;
}
.steps-container ol.steps .step-number {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
background-clip: padding-box;
background-color: grey;
color: #ffffff;
height: 16px;
width: 16px;
text-align: center;
margin: 0 auto;
float: left;
line-height: 15px;
margin-left: 15px;
}
.steps-container ol.steps li.current {
color: #ffffff;
background-color: grey;
}
.steps-container ol.steps li.current .step-number {
background-color: #ffffff;
color: #565656;
}
.steps-container ol.steps li.current:after {
border-left-color: grey;
}
.steps-container ol.steps li.current:before {
-webkit-filter: drop-shadow(0 0 0 transparent);
-moz-filter: drop-shadow 0 0 0 transparent;
-ms-filter: drop-shadow 0 0 0 transparent;
-o-filter: drop-shadow 0 0 0 transparent;
filter: drop-shadow 0 0 0 transparent;
}
.steps-container li.step1 {
z-index: 3;
}
.steps-container li.step2 {
z-index: 2;
}
.steps-container li.step3 {
z-index: 1;
}
.steps-container li.step4 {
z-index: 0;
}
#media screen and (max-width: 767px) {
.step-number-first {
margin-left: 8px;
}
}
#media screen and (min-width: 768px) {
.steps-container {
height: 64px;
}
.steps-container ol.steps {
font-size: 20px;
font-size: 2rem;
}
.steps-container ol.steps .step {
height: 64px;
}
.steps-container ol.steps .step-number {
font-size: 22px;
font-size: 2.2rem;
font-size: 22px;
left: 10px;
height: 36px;
line-height: 36px;
position: absolute;
top: 15px;
width: 36px;
}
.steps-container ol.steps li {
text-align: left;
}
.steps-container ol.steps li .step-content {
margin-top: 20px;
}
.steps-container ol.steps li .step-details {
margin-left: 65px;
}
.steps-container ol.steps li:after {
border-width: 32px 15px;
}
}
DEMO HERE