用CSS怎么画三角形
最近面试经常被问到这个问题，专门写一个来解答一下。以下是参考资料：
主要要弄清楚三角形是怎么来的，在参考资料的第一篇也有讲：
一个div的width和heigth都为0，只有border时会产生什么效果
代码：
<body>
<div class="triangle"></div>
</body>
<style>
.triangle{
width: 0;
height: 0;
border-top: 100px red solid;
border-right: 100px green solid;
border-bottom: 100px blue solid;
border-left: 100px yellow solid;
}
</style>
效果图：
可以看到这时候变成了四个三角形拼成的正方形，已经出现了四个三角形了。如果我们就想要其中的某一个三角形应该怎么做呢。我们以下方蓝色的三角形来举例：
将border-top注释掉，可以看到正方形的上半部分会消失，
这样就只留下下半部分，现在只要让黄色和绿色的部分消失就可以了。消失就会想到将这两部分的颜色设为透明，那就设置transparent
CSS代码：
.triangle{
width: 0;
height: 0;
/* border-top: 100px red solid; */
border-right: 100px transparent solid;
border-bottom: 100px blue solid;
border-left: 100px transparent solid;
}
最终效果图：
等边三角形的画法：如果想要四块三角形的其中一块，那么将另外一边注释掉，两个领边的颜色设置为透明即可实现。
接下来介绍第二种三角形，我们可以从这里看出去掉border-top之后得到的图形，这时候我们想要黄色的三角形该怎么做。
首先，去掉border-right，
后面的思路是一样的了，想要蓝色或者黄色的三角形，只要将其领边的border颜色设置为transparent即可
CSS代码
.triangle{
width: 0;
height: 0;
border-bottom: 100px transparent solid;
border-left: 100px yellow solid;
}
效果图
其他方西的就不一一举例了，具体可以参看参考资料的第二篇。
扫一扫
1846
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
