css 如何画三角形

末蓝、 2022-06-12 09:14 231阅读 0赞

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

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

![Image 1][]![Center][]

但如果每个边都指定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;
    }

![Image 1][]![SouthEast][]

然后就好办了，把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;
    }

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

总结一下：

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

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

![SouthEast 2][]                         ![Image 1][]

比如把左/右边的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;
    }

![Image 1][]

![SouthEast 3][]

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

[Image 1]: 
[Center]: /images/20220612/4db98fb3b9fb4568b4ab9440eb291da5.png
[SouthEast]: /images/20220612/e2cf75df9c1b40bcb0763cbe18a083ee.png
[SouthEast 1]: /images/20220612/67e0bb9baf9f4932bbe6d346aac5502b.png
[SouthEast 2]: https://img-blog.csdn.net/20170720170312216?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGF0ZW5jeV9jaGVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 3]: /images/20220612/ab3ee28e97514399b318433950bb0611.png