在网上看到一个面试题,如何只使用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,懂得不是很多。