How does CSS border-width trick works to create triangles in CSS?

Question

I recently stumbled upon this David Walsh's blog post to create triangles in pure CSS. Here is the code for creating a triangle pointing upwards

div.arrow-up {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;  /* left arrow slant */
    border-right: 5px solid transparent; /* right arrow slant */
    border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}

Here is the working Jsbin demo.

Can somebody help me understand how is this working ? According to me all three borders should have created borders at (left, right, bottom) So it should have been something like |__| shape but how am I getting the slant edges ?