<div class="container">
<div class="heart"></div>
</div>
.container{
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
.heart{
position: relative;
display: inline-block;
width: 10rem;
height: 10rem;
background:#FF1A6F;
transform: rotate(45deg);
border-radius: 10px;
}
.heart:before{
content: "";
left: -5rem;
position: absolute;
background:#FF1A6F;
width: 10rem;
height: 10rem;
border-radius: 50%;
}
.heart:after{
content: "";
top: -5rem;
position: absolute;
background:#FF1A6F;
width: 10rem;
height: 10rem;
border-radius: 50%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.