使用纯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
