Why can this CSS snippet draw a triangle?

Question

I saw the following code without any comments..

.triangle {
    border-color: transparent;
    border-bottom-color: green;
    border-style: solid;
    border-width:  300px;
    border-top-width:0;
    height: 0;
    width: 0
}

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

The result is a green triangle. Does anyone have ideas about why it works?

Answer 1

Corners of a border meet at 45 degree angles.

So showing only one border will show the tapered edges where one side meets the next.

By making 3 of the borders invisible or the same colour as the background we get the illusion of a triangle.

.bdr1{
  height:100px;
  width:100px;
  display:block;
  border:25px solid;
  border-color:red blue green black;
 }
.bdr2{
  height:0;
  width:0;
  display:block;
  border:100px solid;
  border-color:red blue green black;
 }
.bdr3{
  height:0;
  width:0;
  display:block;
  border:100px solid;
  border-color:red white white white;
 }

<div class="bdr1"></div><br/>
<div class="bdr2"></div><br/>
<div class="bdr3"></div>

---

SHAPING THE FUTURE

This technique creates an excellent way to create even more elaborate shapes using only css.

STAR

.Star{ 
  width: 0; 
  height: 0; 
  border-left: 50px solid transparent; 
  border-right: 50px solid transparent; 
  border-bottom: 100px solid red; 
  position: relative; 
} 
.Star:after { 
  width: 0; height: 0; 
  border-left: 50px solid transparent; 
  border-right: 50px solid transparent; 
  border-top: 100px solid red;
  position: absolute; content: ""; 
  top: 30px; 
  left: -50px; 
}

<div class="Star"></div>

---

CHEVRON

.Chevron{
    position:relative;
    display:block;
    height:50px;/*height should be double border*/
}
.Chevron:before,
.Chevron:after{
    position:absolute;
    display:block;
    content:"";
    border:25px solid transparent;/*adjust size*/
}
/*Change four 'top' values below to rotate (top/right/bottom/left)*/
.Chevron:before{
    top:0;
    border-top-color:#b00;/*Chevron Color*/
}
.Chevron:after{
    top:-10px;/*adjust thickness*/
    border-top-color:#fff;/*Match background colour*/
}

<i class="Chevron"></i>

Answer 2

It's because all you're seeing is the bottom-border-color. The left and right borders are transparent, and the top border has no width at all (border-top-width:0;).

Element borders meet at an angle calculated based on the widths of the two borders. So if the borders are both the same width, the angle is 45 degrees. Unequal border widths will create other angles.

Because the .triangle element has no width or height, those angles converge at a single point. The code below will help demonstrate the concept:

    .borders {
        border-bottom-color: green;
        border-left-color: red;
        border-right-color: blue;
        border-top-color: pink;
        border-style: solid;
        border-width:  50px;
        height: 50px;
        width: 50px;
    }

    .triangles {
        border-bottom-color: green;
        border-left-color: red;
        border-right-color: blue;
        border-top-color: pink;
        border-style: solid;
        border-width:  50px;
        height: 0;
        width: 0;
    }

    .triangle {
        border-color: transparent;
        border-bottom-color: green;
        border-style: solid;
        border-width:  50px;
        height: 0;
        width: 0;
    }

<div class="borders"></div>
<hr>
<div class="triangles"></div>
<hr>
<div class="triangle"></div>