CSS画三角形

1.利用border-top，border-bottom，borderleft，border-right

http://www.jb51.net/article/42513.htm

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;//与尖角方向相反
}
#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}
#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

2.为什么能画出三角形
当盒子模型中的内容(Content)+填充(Padding)的大小为0px时，Border边的形状将由梯形变为三角形。
知乎：https://www.zhihu.com/question/35180018
百度前端一道笔试题：http://blog.csdn.net/cinderella_hou/article/details/52130093
CSS三角形產生器:http://apps.eky.hk/css-triangle-generator/zh-hant