Create a border on a triangle

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.

Your code seems to be using borders to create the triangle and so you can make use of Option 1 mentioned in [this thread](http://stackoverflow.com/questions/18057669/border-within-border-css/18058163#18058163). — Harry, Jul 23 '15 at 13:18
the only way I know how to do this is to create (2) triangles and layer them, the 2nd one (the one w/ the actual border) needs to be underneath the first. — Rob Scott, Jul 23 '15 at 13:21
Alternately you could also have a look at [this one](http://stackoverflow.com/questions/27636373/how-to-make-this-arrow-in-css-only/28196665#28196665) which is about creating a progress tracker similar to the one that you are trying to do. — Harry, Jul 23 '15 at 13:39

score 0 · Answer 1 · answered Jul 23 '15 at 13:30

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

Woodrow Barlow · Accepted Answer · 2015-07-23T14:49:16.790

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>

I ended up using drop-shadow. Browser support is very limited which baffles me, but I will try and apply those filters. Hopefully I can with SASS. Thank you. — Cust Ex, Jul 23 '15 at 15:17

Create a border on a triangle

2 Answers2