CSS 创建一个爱心，送给你爱人吧

学习最好的方法，就是把你知道的告诉别人

相信大家对伪元素:before和:after的功能和作用早已佩服的五体投地，有些大神就用这两个玩意创造出各种各样的形状，真是太厉害了，那我们就通过他们来创建个简单的爱心吧。

这是它刚开始的形状：

<style>
.heart {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: pink;
  height: 50px;
  width: 50px;
}
</style>
<div class = "heart"></div>

---

好了，让我们一步步变魔法把它给变出来。

第1步：给它设置:before和:after：

.heart:after {
  background-color: blue;
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 25px;
}
.heart:before {
  content: '';
  background-color: red;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}

---

第2步：设置伪元素为圆形：

.heart:after {
  background-color: blue;
  content: "";
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 25px;
}
.heart:before {
  content: '';
  background-color: red;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}

---

第3步：设置伪元素的背景颜色跟主元素的颜色一致：

有木有像屁股呀

.heart:after {
  background-color: pink;
  content: "";
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 25px;
}
.heart:before {
  content: '';
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}

---

第4步：使用transform: rotate()旋转45°即可：

.heart {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: pink;
  height: 50px;
  width: 50px;
  transform: rotate(-45deg);
}

---

看到了吗？soeasy，与其旁观1万遍，不如动手干一遍，看到的都是别人的，做了才是你的！！！