1. 如何以最简单的方式理解用CSS画三角形原理？（自己实验得出的心得结论）
- 首先要知道一个盒子无宽高，有border时浏览器的显示模式，如下：
代码（border宽度相等的情况下）
效果图：div{ width: 0; height: 0; border-left:50px solid red; border-top:50px solid blue; border-right:50px solid green; border-bottom:50px solid yellow; }image.png
这个我们也不需要知道原理，因为浏览器是这样渲染出来的！
- 然后我们在看下border不等的情况下的模式，代码就不发了，改下各个border-width宽度就行了：
效果图：image.png
由此我们可以看出图中每个三角形的高是等于border-width值的
- 说了这么多，那怎么得出个单独的三角形呢？想一下，把其他另外三个三角形隐身不就可以了嘛，相对的就是把border-color设置为transparent来实现。
代码：
效果图：div{ width: 0; height: 0; border-left:100px solid transparent; border-top:80px solid transparent; border-right:40px solid transparent; border-bottom:70px solid yellow; }image.png
可以看出其他几个三角隐身了。
- 那怎么得出我们想要的三角形呢，比如直角，或者是底边和高需要确定的角，因为底边=相邻两个border的宽度，高=自身border的宽度。那直角呢，开始我看资料也看不懂，然后自己得出个小技巧！
上面的代码4个边的border都设置了，如果哪个边不设置会是怎样的效果呢，看图（下面那个四变形是4个边都设置了border情况下，这样是为了给上面没设置border-right情况下做一个参照，对三角形宽高有个数据上的认识）
当border-right不设置时：
QQ截图20170912170806.jpg
从图中可以看出，border-right不设置时，就好像被直接削掉了右边，如黑线所示。
- 当我们两条边都不设置border时，border-right，border-bottom都不设置。当如下图：
image.png
是不是有点看不明白，你这样来看，如下图：QQ截图20170912170806.jpg
这样是不是看的比较明白点，这样border-right，border-bottom都不设置就好像把下面和右边都削掉了一样，最后只留下左上角，即下图：
image.png
最后怎么得出这个直角三角形，想必你也知道了，设置border-left或者border-top的color为transparent,就得到直角三角形了！
补充，如何制作这种效果？
image.png
只需要两个白黑三角形相叠加，黑色在下，白色在上，但是包裹元素的背景色也要是白色！！！
