Adding border to CSS triangle

Question

I have a triangle

<div class="triangle-left"></div>


.triangle-left {
    width: 0; 
    height: 0; 
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    border-right: 22px solid white;
}

How do I draw the outline of a CSS triangle, considering border itself is used to make the triangle? External divs?

Make another triangle that's red and one pixel wider and then put the white triangle over it and you have a white triangle with a red border. — frenchie, Mar 12 '15 at 04:07
Use the triangle technique described in [this answer here](http://stackoverflow.com/a/24808936/2930477). — misterManSam, Mar 12 '15 at 04:40

score 35 · Accepted Answer · answered Mar 12 '15 at 04:08

One way to do it is the create an inner triangle which is smaller.

.triangle-left {
    width: 0;
    height: 0;
    border-top: 23px solid transparent;
    border-bottom: 23px solid transparent;
    border-right: 23px solid red;
}

.inner-triangle {
    position: relative;
    top: -20px;
    left: 2px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid blue;
}

<div class="triangle-left">
    <div class="inner-triangle"></div>
</div>

how would you do this if the triangle was in an `li:after` element? — Micah, Dec 15 '22 at 14:49

score 30 · Answer 2 · edited Mar 06 '18 at 22:32

This is how I would do it.

.triangle-left {
  width: 0;
  height: 0;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  border-right: 22px solid black;
  position: relative;
}

.triangle-left:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
  border-right: 21px solid #dddddd;
  position: absolute;
  top: -21px;
  left: 1px;
}

<div class="triangle-left"></div>

Here it is on JSFiddle.

Adding border to CSS triangle

2 Answers2

Linked