画纯CSS三角（border-left-color、Unicode符号、CSS3的transform）

这些三角形用图片都是可以达到一样的效果的，但当颜色和比例需要改动时，CSS只要简单的改变一下border的样式就可以了，图片可是要重新替换的，效果也没有那么容易调试，过多的图片也会对页面性能造成影响，所以还是推荐用CSS来实现喽~

普通版

用CSS画个普通三角形，应该已经不是时髦的技术了，现在用的比较普及了，不过还是先讲一下原理吧~

先来看一下盒子模型里内容和border的关系~为了更容易看清楚，我把四面的border分别设置成不同的颜色~

效果如下：

那如果我们继续缩小内容的宽高，直到0呢~

效果如下：

这个时候就很清晰了，我们只要根据需求隐藏相应的border，就剩下一个三角形了~比如：

铛铛档~~新鲜的向下的小红三角形就闪亮出场了~~~

留着上border和左border就是向左上的三角形~

通过调整不同方向border的宽度还可以得到不同比例的三角形，比如~

原理明白了后可能有两个问题就冒出来了：

• 什么场景会用到三角形？
• 为什么不用图片，而要用样式来写？

先来说场景~

来一些网站上的截图：

如果留意的话，就会发现三角形在网站中是个很常用的显示元素呢~

再来说为啥不推荐用图片~

是的，这些三角形用图片都是可以达到一样的效果的，但当颜色和比例需要改动时，CSS只要简单的改变一下border的样式就可以了，图片可是要重新替换的，效果也没有那么容易调试，过多的图片也会对页面性能造成影响，所以还是推荐用CSS来实现喽~

文艺小阴影版

慢慢的，我们希望做出更加高大上的界面，比如希望三角形有阴影效果~

如果我们把阴影样式加在刚才的三角形上：

结果会发现，这根本不是我们想要的样式~ 
box-shadow只会出现在border的位置，没办法让它沿着三角形的边来显示~

再次铛铛铛~几种替换绝招出场啦~~~

Unicode替身法

Unicode符号里有上下左右方向的三角形 ▲ ▼ ◀ ▶，如果我们直接用这种符号，给上阴影效果就可以了

效果都是一样的~

这个方法虽然简单，但也有很多不足，比如三角形的比例不能调整，不同的浏览器对unicode符号渲染的效果经常会有差异，IE9及以下的版本不支持text-shadow，需要特别hack。

双盒旋转大法

原理就是，方块两兄弟，弟弟负责带着阴影旋转，大哥负责遮挡住不该被看到的部分。。。（好像气氛哪里不太对的样子）

最终效果图~ 

分解步骤：

1. 弟弟带着阴影华丽转45度后的样子~ 
   
2. 哥哥自带一小块阴影出场，虚线表示哥哥实际的占地面积~ 
   
3. 哥哥弟弟重合~ 
   
4. 哥哥开挡~ 
   

（为毛觉得整个描述过程都笼罩在一种怪异的氛围中。。。-_-）

上代码：

这个方法能显示出跟unicode方法不一样比例的三角形。。。直角三角形，但也有很多不足，比如三角形的比例也不能调整，用到了CSS3的效果，低版本IE不支持等。

老老实实上图法

最后，如果真心无奈，既要样式高大上，又要多浏览器无差别支持，那就只好上图片了~

最后的最后，戳代码的地方~

相关阅读：

利用:after+border画纯css三角