使用css画出一个三角形

在网上看到一个面试题,如何只使用css画出一个三角形,在没有看到css之前,第一个想法就是使用canvas,但是在网上一搜,发现使用css只需要几句代码就可以搞定.
先看代码:

/*用css画出一个三角形*/
    #triangle-left {
        width: 0;
        height: 0;
        border-top: 100px solid  transparent;
        border-right: 150px solid red;
        border-bottom: 100px solid transparent;
    }

然后再body中引用:

<div id="triangle-left">div文本</div>

效果如下:

是不是很简单?那么，怎么会这样呢,为什么几个border属性就实现了呢？
现在,来一步一步的测试,我们先给div一个高度和宽度，比如都是60px,再来看一次效果:

发现了什么,div中的文本已经在三角形外面了,不是三角形吗,现在怎么还变成了题型呢,再来修改一下,这一次,我们把css中的透明色全部去掉,再看一次效果:

现在你是不是有点想法了?让我们在看的清楚一点,给每个边框设置一个颜色,然后把左边框给加上,再看一次:

这下你是不是有点恍然大悟,最开始的三角形,竟然只是一个边框而已,而中间的白色区域，才是div真正的大小,再仔细看,是不是觉得,这就是一个盒子,div是底部旁边是盒子的四个封面,再次把div’的宽高设置成0,:

发现了吗,四个三角形就这样出现了,现在知道css为什么要把三个border中的两个都给透明,这样的话,就只剩下一条border,也就是只剩下一个三角形了,而且这个时候,四面墙都是根据中间的一”点”散发出来的。因为div已经没有了宽高,所以中间只剩下一”点”了,如果我们把四条border和div的宽高都设置一样的，那么,就是五个正方形了.
需要注意的一点就是,如果一开始给border设置了颜色,然后在设置透明,那么，透明的是一个方形区域，而不是三角形。
比如现在，把黄颜色区域隐藏掉,看看效果:

看到了吧,整个上半边都没有了,透明的是黄色三角形所在的长方形,这个长方形以黄色三角形的底为长,高为宽,所以既然我们决定要设置透明,就不要再给border设置颜色了,把黄色去掉,再次透明,看看效果:

看到了吗,上面的三角形透明了,如此,我们把左边和下边的颜色去掉,然后透明,看下最终效果:

三角形出来了。有需要的同学，可以去看一下盒模型,我也是刚接触h5，懂得不是很多。