Adding border to CSS triangle [duplicate]

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?

Answer 1

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>