css 三角形

transparent 实现css三角形。

div.tri{
    width: 0;
    height: 0;
    border-top:50px solid transparent ;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
    border-bottom: 50px solid red;
}

比如上述代码就得到了以bottom为底高为20px的红色三角形。底的长度为左右border的width之和。

只要设置其他三个方向的border的颜色为transparent,最后一个方向的为某个颜色，就可以得到以这个方向为底，高度为对应border-width的三角形了。
可以将div以中心点分成4个三角形，border-width分别控制三角形的高，可以通过transparent控制该方向的三角形是否显示。

如果width和height不为0,那将会是这样子的梯形：