Unlock Triangle Secret in CSS - html

Question

Can anyone explain how it forms a triangle when the CSS width and height are set to 0.
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

Answer 1

This is just a clever CSS Trick, shown on CSS Tricks.
It’s basicly like a giant 3D border-corner. (when the left and top border-color are different the edge is diagonal, that’s being used to make this triangle).

Answer 2

A border is created on the outside of the set sized dimensions of an element unless you're using box-sizing: border-box and then all borders and padding are included in the set size of that element. Therefore, even though your element size is 0, it's building outside that to the size determined in your border rule.
Nothing magical happening here.
E.g.
div {
width: 0;
height: 0;
border: 10px solid #ccc;
}
<div></div>
http://codepen.io/paulcredmond/pen/rrpRjz