关于直接用css生成三角形的问题

Question

以前我知道一种方法:它的机制是：比如div，我设置它的宽高为100px,然后设置border:50px solid transparent;即设置4个向内延伸的透明边框；

再根据需要三角形的朝向比如朝下就设置border-top:red;将需要的边框上色，这样就得到红色的三角形。

但是对于图中

以下代码：.m-UIFAB-phone .triangle-1 {

border-right: 200px solid transparent;
border-top: 200px solid #aaa;
height: 0;
left: 0;
position: absolute;
top: 0;
width: 0;

}

是生成左上角灰色等边三角形的css。

但是我不理解它生成的机制。设置在宽高为0情况下，设置border-top和border-right是如何起作用的。对于box-sizing为border-box和content-box这样的css相同吗？最好可以画图表示一下三角形的形成过程，解释下 border-right: 200px solid transparent;和 border-top: 200px solid #aaa;各自的作用谢谢。