情人节，你比心了么？- 用 9 种 CSS 方式画“心”

抱歉标题党了 :P。

情人节，笔者虽然有代码的陪伴（www），但是还是有些寂寞（sad）就跑来发文了，原文在自己自娱自乐的博客 imo++ 上，在线 demo 可以戳这里。

其实严格意义上并没有九种那么多，因为好几种实现的思路是一样的 Orz。关键词有：

• 伪元素
• border 画三角（甚至扇形）
• 渐变——linear-gradient 和 radial-gradient
• SVG

实现过程中遇到了几个问题：

• 层叠上下文

  • 问题&原因：为了使 position: absolute; 的伪元素不会遮挡文字而设置了 z-index: -1; ，但根据 层叠规则（stack order） ，此时伪元素处于所在父元素（一个 li 元素，即一个“block 块状水平盒子”）之下，即此时伪元素被有背景色的父元素遮挡了！
  

  [张鑫旭大神相关博客](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. 欢迎来留下第一个评论（比心）