抱歉标题党了 :P。
情人节，笔者虽然有代码的陪伴（www），但是还是有些寂寞（sad）就跑来发文了，原文在自己自娱自乐的博客 imo++ 上，在线 demo 可以戳这里。
其实严格意义上并没有九种那么多，因为好几种实现的思路是一样的 Orz。关键词有：
- 伪元素
- border 画三角（甚至扇形）
- 渐变——linear-gradient 和 radial-gradient
- SVG
实现过程中遇到了几个问题：
-
层叠上下文
- 问题&原因：为了使
position: absolute;的伪元素不会遮挡文字而设置了z-index: -1;，但根据 层叠规则（stack order） ，此时伪元素处于所在父元素（一个li元素，即一个“block 块状水平盒子”）之下，即此时伪元素被有背景色的父元素遮挡了！
中的 *层叠规则（stack order）* 示例图（局部）](http://image.zhangxinxu.com/image/blog/201601/2016-01-08_235511.png)
[张鑫旭大神相关博客](http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/)中的 *层叠规则（stack order）* 示例图（局部）- 解决方案：对父元素设置
display: flex;的同时对伪元素所在div设置z-index: 0;（只要设置一个非负数值即可，这里的主要目的是使该div成为一个层叠上下文元素）。
- 问题&原因：为了使
-
SVG 中 text 的居中
- 解决方案：见文末女神 Lea Verou 的文章
参考资料：
深入理解 CSS 中的层叠上下文和层叠顺序 by 张鑫旭
Easily center text vertically, with SVG! by Lea Verou
P.S. 欢迎来留下第一个评论（比心）
