CSS3实现三角形

三角形实现原理：

宽度width为0；height为0；

（1）有一条横竖边（上下左右）的设置为border-方向：长度solidred，这个画的就是底部的直线。其他边使用border-方向：长度solidtransparent。

（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。

例如：

1.向上的三角形

#triangle-up{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solidred;
}

2.向右的三角形

#triangle-right{
width:0;
height:0;
border-top:50px solid transparent;
border-left:100px solid red;
border-bottom:50px solid transparent;
}

3.顶角向左上的三角形

#triangle-topleft{
width:0;
height:0;
border-top:100px solid red;
border-right:100px solid transparent;
}