利用CSS3新特性创建透明边框三角

先来看一下效果，这在CSS3普及之前基本是没法想的——只有图片才能实现这种三角。但到了HTML5和CSS3大行其道的今天，搞定这种效果不过是顺手拈来。

直接上代码：

原理其实很简单：利用边框的透明属性，把三个边框设为透明，剩下一个边框设置颜色和宽度，就能得到一个纯CSS的三角形。四个方向分别对应不同的边框组合，灵活调整宽度和颜色就能随心所欲地控制大小和样式。这种技巧在工具提示、下拉菜单、浮动标签等场景里非常实用，比用图片或SVG轻量得多。