border的正常使用：如图1
<body>
<div class="triangle-bottomleft"></div>
</body>
<style>
.triangle-bottomleft{
width:100px;
height:100px;
border-bottom: 10px solid black;
border-right: 10px solid yellow;
border-top: 10px solid black;
border-left: 10px solid red;
}
</style>
此时定义了这个元素的宽度和高度，设置4个边框。
除此之外，我们可以利用border属性制作很多小图型（如：三角形）
思考：如果设置width和height为0呢？
首先设置width：0，此时运行结果图：图2所示。
我们可以发现设置元素宽度为0后，为其设置border后，变成了小三角形（其实是补全了height上的边框）。
继续设置height：0，此时运行结果图：图3所示。
可以看到，当宽和高都为0时候，设置边框后即显示成了三角形。
所以我们可以为边框设置不同的px，来让其拥有更多种的变化。
下面来实现一个简单的三角形
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid red;
相信聪明的你已经猜到了这个图型是如何显示的。
没错，就是这个三角形！
这里是把左右边框都设置为透明的（transparent），实际图形如图5
这里把左右边框都设为透明，就可以变成一个三角形，即图4。
切记：最终的图形都组合成一个四边形，只不过是设置边框透明实现了三角形。
最后我推荐一个网站，上面有用border属性制作小图形的实现（有源码）
https://css-tricks.com/the-shapes-of-css
至此，我的总结完毕，第一篇博客， 希望能帮到更多的人！
