css实现三角形是个非常有意思的事情。
先看看如果 width height都为0，边框不为零的时候，浏览器是如何渲染的？ 莫非是中间留出空位？当然并不是，它会自动把边框变成三角形
width: 0;
height: 0;
border-width: 30px;
border-style: solid;
border-color: yellow red green blue;
Paste_Image.png
所以，如果我们想要三角形的话，只需要 只设置边框，让某些边框变成透明即可
把三个边框都设置为透明
#triangle-up {
width: 0;
height: 0;
border-width: 30px;
border-style: solid;
border-color: transparent transparent red transparent;
}
Paste_Image.png
上面可以看到，三角形的形状就出来了。其他方向其实也同理
左下的效果
#triangle-left-down {
width: 0;
height: 0;
border-width: 30px;
border-style: solid;
border-color: transparent transparent red red;
}
Paste_Image.png
