绘制三角形
实现原理
border 由 top、bottom、left、right四个部分组成，合理利用这四个部分的背景色和宽度控制，就可以实现简单三角形。
实现一个等腰直角三角形
<div></div>
1
div {
width: 0;
border: 50px solid;
border-color: transparent transparent #3eaf7c;
}
1
2
3
4
5
2
3
4
5
实现一个等腰三角形
<div></div>
1
div {
width: 0;
border-style: solid;
border-width: 0 50px 100px 50px;
border-color: transparent transparent #3eaf7c;
}
1
2
3
4
5
6
2
3
4
5
6
实现一个等边三角形
<div></div>
1
div {
width: 0;
border-style: solid;
border-width: 0 50px 86.6px 50px;
border-color: transparent transparent #3eaf7c;
}
1
2
3
4
5
6
2
3
4
5
6
实现一个直角三角形
<div></div>
1
div {
width: 0;
border-style: solid;
border-width: 50px 60px;
border-color: transparent transparent #3eaf7c #3eaf7c;
}
1
2
3
4
5
6
2
3
4
5
6