使用CSS3绘制一个实心三角形

末蓝、 2021-09-17 02:40 473阅读 0赞

效果如下：

![20181126095235664.png][]

实现这一过程其实很简单：   
1、先创建一个盒子

2、为这个盒子添加样式

#trangle {
        height: 0;
        width: 0;
        border-right: 50px solid transparent;
        border-bottom: 50px solid yellow;
        border-left: 50px solid transparent;
    }

搞定！顿时觉得好简单，一个边框就能解决的事

实现原理如下   
先创建一个有宽高的盒子，同时设置四条边框的大小，假设为50px，结果如下图：

![20181126095411841.png][]

可以发现边框与边框的连接是一条斜线，那么如果不设置宽高的话，结果会怎样：

![20181126095441750.png][]

变成了一个被四种颜色平均分割的正方形了，我们所要的三角形不正是其中的一部分吗，接下来我们只要选择我们所需要的那一部分就好了，所以可以这么做（选择上面那块红色的）：

#trangle {
        height: 0;
        width: 0;
        border-top: 50px solid red;
        /*此处将左右的边框设置为透明色*/
        border-right: 50px solid transparent ; 
        border-left: 50px solid transparent;
    }

把剩余两边设置为透明色即可以，这里不为下边框设置宽度和颜色是因为下边框取消的话，原来的图像会变成这样：

![20181126095611202.png][]

对整个图像并没有太大的影响，而且释放了下边框所占的位置，当在图下面添加东西时不会有凭空的一块空白。   
所以上面那段style运行的结果如下：

![20181126095634351.png][]

至此三角形的绘制也就完成了，如果需要绘制一个直角三角形，那么可以只设置（左、右）中的一个和（上，下）中的一个即可。结果展示：

![2018112609570617.png][]

只要把不需要的那部分设置为透明色就可以了。

### 原文链接：[https://blog.csdn.net/elliotbaird/article/details/71249192][https_blog.csdn.net_elliotbaird_article_details_71249192] ###

[20181126095235664.png]: /images/20210813/20daa865e9a14697ade2fb206aaeebc9.png
[20181126095411841.png]: /images/20210813/c67455b0689c4348a3dea2856294df07.png
[20181126095441750.png]: /images/20210813/c73c5167f66143a5a58c99aa5762d91e.png
[20181126095611202.png]: /images/20210813/cfe85d3730f742e59b7c6ba14740d3c7.png
[20181126095634351.png]: /images/20210813/02cc295efbcc4f6b8aa15259261a7fba.png
[2018112609570617.png]: /images/20210813/2642f88b6aec4b3fac9087d1e130748d.png
[https_blog.csdn.net_elliotbaird_article_details_71249192]: https://blog.csdn.net/elliotbaird/article/details/71249192