为什么这个CSS代码片段会绘制一个三角形？
这个问题在这里已经有了答案：
边界的角落以45度角相遇。
因此只显示一个边框将显示一边与下一边相接的渐缩边缘。
通过使3个边框不可见或与背景颜色相同，我们可以得到三角形的幻觉。
.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> 这是因为你所看到的只是bottom-border-color 。 左边框和右边框是透明的，上边框根本没有宽度（ border-top-width:0; ）。
元素边界以基于两个边界宽度计算的角度相交。 所以如果边界宽度相同，角度是45度。 不等边框宽度将创建其他角度。
因为.triangle元素没有宽度或高度，所以这些角度会聚在一个点上。 下面的代码将有助于展示这个概念：
.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>