利用css画三角形

一、目的

利用css画三角形

二、原理

利用border属性，将其中的一个边框设置颜色，其它的边框设置成透明的

三、代码片段

1. 为了方便理解，首先设置一个四个边框为不同颜色的box,效果如下、

 

代码

#box1{

width: 0;

height:0;

margin: 40px auto;

border-top: 40px solid green;

border-right: 40px solid blue;

border-left: 40px solid black;

border-bottom: 40px solid red;

}

2、将其它3个变的边框设置成透明的，就可以出来三角形了

效果

 

代码

#box2{

width: 0;

height:0;

margin: 40px auto;

border-top: 40px solid transparent;

border-right: 40px solid transparent;

border-left: 40px solid transparent;

border-bottom: 40px solid red;

}

（我有免费的CSS、JavaScript学习视频，想要的鞋童们可以加我微信）