首页 > 代码库 > 如何用css画出三角形
如何用css画出三角形
看到有面试题里会有问到如何用css画出三角形
众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状
画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色。
如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条。
这个时候如果将盒模型内部的height,width调为0px,则三角形就形成了。
1 border:100px solid transparent //边框100px,实线,透明颜色,下面三行代码等同于此句 2 border-width:15px; //border-width代表所有方向的border 3 border-style:solid; 4 border-color:transparent;
如果你看明白了原理那么现在你应该已经可以自己写出代码了。
1 width: 0; 2 height: 0; 3 border-left: 50px solid transparent; //左边宽度50px,实线,透明颜色 4 border-right: 50px solid transparent; //右边同上 5 border-top: 100px solid red; //上边宽度100px,实线,红色
上面这段代码可以生成一个向下的三角形。如下图所示(为便于理解我替换了右边的颜色)
由这个效果图我们可以看出,要生成一个三角形我们需要三条边框。
左右边框的高度会决定三角形的高有多长。
三角形高度则由边框自己的宽度决定
那么如何生成一个指向右下或者左下之类的这样的三角呢?
相信大家已经通过上面的图看出来了。
我们只需要两条边框就够了。
1 width: 0; 2 height: 0; 3 border-top: 100px solid red; 4 border-right: 100px solid transparent;
这段代码就会生成一个指向左下的三角形,底和高都是100px。
还记不记得border-width。
它可以用一句代码定义四条边框的宽度。
转载自:http://www.cnblogs.com/Aaxuan/p/6066316.html
如何用css画出三角形
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。