css 画三角形

今天学到一点新知识，原来用css可以画三角形，于是自己找资料学习了下，原来实现起来很简单~

原理：

用css画三角形，实际上是用border绘制三角形。

border有一个特性：当一个元素的宽高都为0时，给border设置宽度（至少给2个相邻的边框设置宽度），border就会撑开这个元素；当四个边框同时设置宽度时，四个边最后在元素的中心汇成一个点。

一起来一步一步探究一下吧~

（1）先绘制一个有border的div：

（2）接下来，增大boeder宽度；

可以看出：给一个有宽高的元素设置border时，四个边框的衔接方式是以对角线形式，而不是以直角拼接。

（3）接下来，设置元素的宽高为0：

也可以这样实现：

以上说明了：元素的border是由三角形组成。

所以，要画出一个三角形，只需让其他三个三角形消失即可。如下两种方法就可以实现画一个三角形：

（1）把其他三个三角形设置为透明，例子如下：

上三角：

下三角：

左三角：

右三角：

（2）也可以通过设置其中几条边的宽高来实现，例子如下：

上三角：

下三角：

左三角：

右三角：

参考链接：

https://www.cnblogs.com/qiujianmei/p/7188598.html
https://www.jianshu.com/p/9a463d50e441
https://www.cnblogs.com/wangjiachen666/p/9462837.html
https://www.cnblogs.com/lhb25/p/css-and-css3-triangle.html