纯CSS绘制三角形原理剖析

1. 用css绘制三角形有什么用？

通常情况，项目中的一些气泡提示词模块或是带有指向箭头的模块一般都会有一个三角形的小箭头，如下图：

应用实例.png

如果我们把通过css绘制好的小三角形放入其中，这样就会有一个指向性的效果；当然，这个小三角形也可以不用css来绘制，直接用ps做一个三角形的png图片来代替，这种方案最为简单粗暴，也是我最喜欢的一种，但是缺点也非常明显，就是一旦三角形的样式改变，就要重新做ps图，比较麻烦；因为是图片，也可能存在浏览器加载图片失败的情况。而用纯css绘制的小三角形就不会出现浏览器加载失败的情况，当三角形样式有所变化时，我们只修改css代码即可，不用在ps上做好图片再重新替换图片，这样可以省去不少时间。

2. css中的border属性与三角形的关系

border跟三角形能有什么关系？绝大多数开发者都会认为元素的border是由四个矩形边框拼接而成，日常开发也是拿过来直接使用的，比如给边框设置个宽度为相应的px像素啥的，由于日常的使用习惯，就会对border的形成方式产生误解，下面我来一步一步剖析border与三角形的关系。
首先我们来绘制一个正方形，并为其设置边框为40px，四个边框颜色均不一致，代码如下：

运行结果如下图：

边框.jpg

我们会发现每条边框交汇处并不是以直角形式存在的，我们现在把该元素的宽度和高度都设置为0px看看是什么效果，代码如下：

运行结果如下图：

无边框.jpg

我们会发现改边框是由4个三角形拼接而成的，如果我们想得到这四个三角形的其中的一个，只要把另外三个三角形也就是另外的三条边框颜色设置为透明即可，比如我们想要留下红色的三角形，代码如下：

运行结果如下：

三角形.jpg

如果想让三角形的容器更小一些，我们可以将底边删除，这样会精致一些，代码如下：

3. 如何给三角形设置边框

为已有三角形设置border的方法肯定是不行的，所以要另辟蹊径，思路就是把三角形叠放，即把当前三角形叠放在更大的三角形上方，下图所示的实现方法就是把黄色三角形放在了红色三角形之上，通过相对定位让红色三角形漏出边框，这样这个黄色的三角形就有了自己的“边框”效果了。代码如下：

执行结果如下：

带边框的三角形.jpg

PS:我们可以通过css把黄色的三角形设置的更小一些，这样就可以漏出底边了；也可以把黄色设置成白色，把被覆盖的红色三角形设置成黑色，这样这个三角形就是一个白色带黑边框的样式了。