How to create a heart shape using CSS?

In this blog, we will know how to make a heart shape using CSS.
When we talk about heart, we talk about LOVE. So let's start making heart shape with full of love.

We will use a single div to create heart shape.

Lets's start...

Create a HTML file and write this code to your file.

        
<div class="heart"></div>
        
    

If you write this HTML code, then add some LOVE.
Ohh sorry.. I mean CSS

        
body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
    
.heart {
    position: relative;
    background: red;
    height: 100px;
    width: 100px;
    transform: rotate(315deg);
}
    
.heart::before {
    content: "";
    position: absolute;
    top: -50px;
    left: 0px;
    background: red;
    height: 100px;
    width: 100px;
    border-radius: 50%;
}
    
.heart::after {
    content: "";
    position: absolute;
    left: 50px;
    top: 0px;
    background: red;
    height: 100px;
    width: 100px;
    border-radius: 50%;
}                       
        
    

Now save the HTML file and you are done.

Check your output in your browser. It will looks like the same as below

---

Join Our Telegram Channel