2 Ways To Create Heart

2 Ways to Create Heart Shape With CSS

Method 1:


.heart-1{
   height: 70px;
   width: 70px;
   background-color: #F34279;
   position: absolute;
   transform: rotate(45deg);
   border-radius: 0 0 10px 0;
}

.heart-1:before,
.heart-1:after{
   position: absolute;
   content: "";
   height: 60%;
   width: 100%;
   background-color: #F34279;
   border-radius: 35px 35px 0 0;
}

.heart-1:before{
   top:-59%;
} 

.heart-1:after{
   transform: rotate(-90deg);
   top:20%;
   right: 78%;
}

Method 2:


.heart-2{
   position: absolute;
   height: 80px;
   width: 50px;
   background-color: #F34279;
   transform: rotate(45deg);
   border-radius: 25px 25px 7px 0;
}
.heart-2:before{
   position: absolute;
   content: "";
   height: 100%;
   width: 100%;
   background-color:#F34279;
   transform: rotate(90deg);
   border-radius:  0 7px 25px 25px;
   bottom: -19%;
   left:-30%;
}

My Youtube Channel

🧡 2 Ways To Create Heart 🧡