用css画三角形

发表于 | 更新于 | 分类于 | 评论数： 
1
2
3
4
5
6
7
.triangle{
    height:0;
    width:0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

画出的是一个倒立的三角形, 改为border-bottom就是一个正立的三角形。其中是底边为100px,高度为100px的等腰三角形。

border画多边形的原理

1
2
3
4
5
6
7
8
9
.box{
    width: 100px;
    height: 100px;
    margin:10px;
    border-left:100px solid red;
    border-right:100px solid blue;
    border-top:100px solid yellow;
    border-bottom:100px solid green;
}

盒子模型

如上图的盒子模型，可以明显的看出，border实际上是一个等腰梯形。

当宽度为0时

宽度为0

四个边框变成四个等腰三角形。

TODO：继续深入了解，解决梯形的问题

当width和height为0时，默认是四个三角形，当宽度或高度不为0的时候，就可以画出梯形。

1
2
3
4
5
6
7
8
9
.box{
    width: 100px;
    height: 0;
    margin:10px;
    border-left:100px solid red;
    border-right:100px solid blue;
    border-top:100px solid yellow;
    border-bottom:100px solid green;
}