CSS画三角形原理

使用纯CSS画三角形，记得去年自己就碰到过。但是当时只是一味的在网上粘贴复制了写代码，并没有深究其原理。今天特地写一个学习笔记，记录一下。
大家都知道的盒模型，默认情况下形状是矩形的。下图为设置了width=200px div的盒模型。

盒模型

下面我们来看一看border。
html代码：

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

css：

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

效果如图所示：

border

以上的效果我相信，只要学过前端的都会。
但是你知道border-top border-bottom border-right border-left到底是怎么划分的吗？？反正我之前是不知道的,下面我们来看看。

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

从图中我们可以看到每个border都是一个梯形，这并不像我之前以为的矩形。
接下来让我们，我们把div元素的宽变为0,这种情况下border又会是怎么变化的呢？（从图中我们可以每个border都是一个梯形，其中梯形的上底边等于div的width。为了把梯形变为三角形，我们就要缩小div的width。）

#demo{
             width:0px;  
             height:0px;  
             border: 40px solid;  
             border-color: red blue red blue; 
        }

在这种情况下，4个梯形变成了4个个三角形。那么到这里我们也就知道了如何使用CSS画三角形了。

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

我们把其他3条边设为transparent，就会得到如图所示的三角形。在这里border-bottom的width控制了三角形的高。
如果我们再把一条边设为0，又会变成什么样的呢？？

这样我们就得到了一个直角三角形。我们使用CSS还能画出其他的形状，具体请参考下面的链接：
https://css-tricks.com/examples/ShapesOfCSS/

遇到问题，自己动手试试，就会豁然开朗的。
以下为参考资料：
https://www.zhihu.com/question/35180018
http://www.tuicool.com/articles/3eaINn