CSS画三角形原理

HTML代码：

<div id="demo"></div>

CSS:

#demo{
            width:100px;
            height:100px;
            border:3px red solid;
        }

它的效果是这样的：

更进一步想想border-top、border-bottom、border-right、border-left是如何划分的呢，试一下呗：

#demo{
             width:100px;  
             height:100px;  
             border: 20px solid;  
             border-color: red blue red blue; 
        }

可以看到每个border都是一个梯形，并不是我以为的矩形。

记住我们的目标：三角形，试试把div的宽高变为零，效果如下：

接下来隐藏三个三角形，留下一个即可完成目标：

#demo{
             width:0;  
             height:0;  
             border:40px solid transparent;
             border-bottom:80px solid red;
        }

CSS简直深不可测啊，它还能画出更多形状