CSS 如何纯 CSS 画爱心？

Question

CSS 如何纯 CSS 画爱心？

仓乃文 · Accepted Answer

爱心可以由一个正方形和两个圆形组合而成，通过伪元素和位移实现，整体旋转 45 度即成爱心形状。

```css
.heart {
  width: 200px;
  height: 200px;
  position: relative;
  transform: rotate(45deg);
  background-color: red;
}

.heart::before,
.heart::after {
  content: ";
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  background-color: red;
}

.heart::before {
  left: -100px;
}

.heart::after {
  top: -100px;
}
```

补充说明：
- before 伪元素向左位移正方形一半宽度，after 伪元素向上位移正方形一半高度
- transform: rotate(45deg) 让正方形对角线朝上
- 三个元素颜色必须一致
- 可用于 loading 动画、装饰元素等场景