<div class="app">
<div class="heart"></div>
</div>
.app {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.heart {
width: 100px;
height: 100px;
position: relative;
background-color: #f00;
transform: rotate(45deg);
}
.heart::before,
.heart::after {
position: absolute;
content: '';
background-color: #f00;
top: 0px;
left: -50%;
width: 100%;
height: 100%;
border-radius: 50%;
}
.heart::after {
left: 0;
top: -50%;
}
效果图