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

效果如下： 

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

<div id="trangle"></div>

2、为这个盒子添加样式

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

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

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

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

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

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

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

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

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

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

 

原文链接：https://blog.csdn.net/elliotbaird/article/details/71249192