用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;
}
效果图
其他方西的就不一一举例了,具体可以参看参考资料的第二篇。