做一个有❤️的前端就是这么简单

html

html
1 <div class="heart"></div>

css

css
1.heart {
2  position: relative;
3  width: 100px;
4  height: 90px;
5}
6.heart:before,
7.heart:after {
8  position: absolute;
9  content: "";
10  left: 50px;
11  top: 0;
12  width: 50px;
13  height: 80px;
14  background: red;
15  border-radius: 50px 50px 0 0;
16  transform: rotate(-45deg);
17  transform-origin: 0 100%;
18}
19.heart:after {
20  left: 0;
21  transform: rotate(45deg);
22  transform-origin: 100% 100%;
23}