<style>
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg); /*45度的两个拼起来的*/
}
.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;
}
</style>
<div class = "heart"></div>
![](https://img2020.cnblogs.com/blog/2216408/202101/2216408-20210109143716277-1115063587.png)