css 如何画三角形

之前一直不懂用 css 的 border 属性怎么画出的三角形，今天来总结一下。

关键就在于如果指定一条边的border，那这个border就是一条直线。

但如果每个边都指定border，但是隐藏其他三个边，剩下的一条border显示为一个梯形

.tri-angle{
    height: 200px;
    width: 200px;
    /*border: 10px solid black;*/
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid black;
}

然后就好办了，把div的宽度变成0，梯形的上底就没有了，就变成了一个三角形

.tri-angle{
    /*height: 0;
    width: 0;*/      /*长度为0可以不用特意写出来*/
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid black;
}

接下来，只要调整各个border的宽度，做出想要的三角形就好了。

总结一下：

向上的三角形，1、除了下边以外，其他三条边的border都要隐藏掉；

                         2、下边border的宽度决定三角形的高，左右border的宽度决定三角形两个底角的角度。

                                                    

比如把左/右边的border宽度设为0，就可以得到一个直角三角形。

.tri-angle{
    border-top: 100px solid transparent;
    /*border-left: 0px solid transparent;*/    /*宽度为0不需要特别写出来*/
    border-right: 100px solid transparent;
    border-bottom: 100px solid #999;
}

其他方向的三角形也是类似的方法就可以画出来啦。