<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%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.