用 CSS 即可绘制出各种箭头，无需裁剪图片，甚至没有用到 CSS3 的东西。对浏览器支持良好。以前写过一片文章，我博客的评论框就是用箭头来实现的。原理非常简单，通过截取 border(边框)的部分“拐角”实现，几行 CSS 代码即可理解。
一个梯形
当元素宽、高和边框的宽相近（等）时，改变某一边的颜色可以看到一个梯形:
三角形
当元素宽、高为零，且其他边为透明颜色时，可以形一个三角形:
任意角度三角形
改变各个边的宽度，即通过调整“边框”厚度可以配置出任意角度:
伪元素实现
三角形可以通过伪元素绘制出，而无需改变原来的 DOM 结构:
文字内容
伪元素三角线箭头
通过伪元素绘制出的两个，一个与背景色相同覆盖部分红色箭头，形成三角线:
文字内容
三角线分割的 Tab 页
- 文字内容 Tab1
- 文字内容 Tab2
- 文字内容 Tab3
