盒子模型制作三角形

盒子模型制作三角形在前端面试题中很常见，在实际开发中也经常用到：

盒子模型制作三角形：
三角形本来就属于border.所以css中要有：border-width,border-style,border-color.此外，三角形的底边朝哪边就把哪一个方向的border-color值设为想要的三角形颜色值。另外，三角形的尖尖朝哪个方向就把那个方向的border-width设为0.同时，由于三角形是border，所以可以把width和height设为0px.
举例
三角形朝上：
<div class="triangle_border_up">

</div>

.triangle_border_up{
    width:0;
    height:0;
    border-width:0 30px 30px;      //上  左右  下
    border-style:solid;
    border-color:transparent transparent #333;/*透明 透明  灰*/
    margin:40px auto;
    position:relative;
}


三角形朝左：

<div class="triangle_border_left">
   
</div>

.triangle_border_left{
    width:0;
    height:0;
    border-width:30px 30px 30px 0;
    border-style:solid;
    border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
    margin:40px auto;
    position:relative;
}