看到有面试题里会有问到如何用css画出三角形
众所周知好多图形都可以拆分成三角形，所以说会了画三角形就可以画出很多有意思的形状
画出三角形的原理是调整border（边框）的四个方向的宽度，线条样式以及颜色。
如果你将宽度调的足够大，改变不同方向的颜色，你就可以发现盒模型的border是四个梯形一样的线条。
立即学习“前端免费学习笔记（深入）”；
这个时候如果将盒模型内部的height，width调为0px，则三角形就形成了。
border:100px solid transparent //边框100px，实线，透明颜色，下面三行代码等同于此句border-width:15px; //border-width代表所有方向的borderborder-style:solid;border-color:transparent；
如果你看明白了原理那么现在你应该已经可以自己写出代码了。
width: 0; height: 0; border-left: 50px solid transparent; //左边宽度50px，实线，透明颜色 border-right: 50px solid transparent; //右边同上 border-top: 100px solid red; //上边宽度100px，实线，红色
上面这段代码可以生成一个向下的三角形。如下图所示（为便于理解我替换了右边的颜色）
由这个效果图我们可以看出，要生成一个三角形我们需要三条边框。
左右边框的高度会决定三角形的高有多长。
三角形高度则由边框自己的宽度决定
那么如何生成一个指向右下或者左下之类的这样的三角呢？
相信大家已经通过上面的图看出来了。
我们只需要两条边框就够了。
width: 0;height: 0;border-top: 100px solid red;border-right: 100px solid transparent;
这段代码就会生成一个指向左下的三角形，底和高都是100px。
还记不记得border-width。
它可以用一句代码定义四条边框的宽度。
以上就是使用css画出三角形的方法介绍的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1608139.html
微信扫一扫 
支付宝扫一扫 
