How to create a heart shape using CSS?

Question

I've found the following CSS in one of the answers here on SO and I was wondering why does it create the desired heart shape:

#heart { 
    position: relative; 
    width: 100px; 
    height: 90px; 
} 

#heart:before, #heart:after { 
    position: absolute; 
    content: ""; 
    left: 50px; 
    top: 0; 
    width: 50px; 
    height: 80px; 
    background: red; 
    border-radius: 50px 50px 0 0; 
    transform: rotate(-45deg); 
    transform-origin: 0 100%; 
} 

#heart:after { 
    left: 0; 
    transform: rotate(45deg); 
    transform-origin :100% 100%; 
}

<div id="heart"></div>

Please can someone explain?

Heart with Pulse Animation : https://youtu.be/Jq4diUd10Zs – Mandeep Pasbola Feb 10 '22 at 18:47 — Mandeep Pasbola, Feb 10 '22 at 18:47

score 51 · Accepted Answer · edited Jul 07 '18 at 13:19

CSS3 Mon Amour - A 4 Step Love Afair

There are a few steps for creating heart shape using CSS3:

Create a block-level element such as a <div> in your DOM and assign it with id="heart" and apply CSS:

#heart {
     position:relative; 
     width:100px; 
     height:90px;
     margin-top:10px; /* leave some space above */
}

Now using pseudo-element #heart:before we create a red box with one rounded edge like this:

#heart:before {
    position: absolute; 
    content: ""; 
    left: 50px; 
    top: 0; 
    width: 52px; 
    height: 80px; 
    background: red; /* assign a nice red color */
    border-radius: 50px 50px 0 0; /* make the top edge round */ 
}

Your heart should now look like this:

enter image description here

Let us assign a little rotation to that by adding:

#heart:before {
    -webkit-transform: rotate(-45deg); /* 45 degrees rotation counter clockwise */
       -moz-transform: rotate(-45deg); 
        -ms-transform: rotate(-45deg); 
         -o-transform: rotate(-45deg); 
            transform: rotate(-45deg); 
    -webkit-transform-origin: 0 100%; /* Rotate it around the bottom-left corner */
       -moz-transform-origin: 0 100%; 
        -ms-transform-origin: 0 100%; 
         -o-transform-origin: 0 100%; 
            transform-origin: 0 100%;
}

And we now get:

enter image description here

Already starting to come together :).

Now for the right part we basically need the same shape only rotated 45 degrees clockwise instead of counter clockwise. To avoid code duplication we attach the css of #heart:before also to #heart:after, and then apply the change in position and in angle:

#heart:after { 
    left: 0; /* placing the right part properly */
    -webkit-transform: rotate(45deg); /* rotating 45 degrees clockwise */
       -moz-transform: rotate(45deg); 
        -ms-transform: rotate(45deg); 
         -o-transform: rotate(45deg); 
            transform: rotate(45deg); 
    -webkit-transform-origin: 100% 100%; /* rotation is around bottom-right corner this time */
       -moz-transform-origin: 100% 100%; 
        -ms-transform-origin: 100% 100%; 
         -o-transform-origin: 100% 100%; 
            transform-origin :100% 100%; 
}

And voilà! a complete heart shaped <div>:

enter image description here

Snippet without any prefix:

#heart {
  position: relative;
  width: 100px;
  height: 90px;
  margin-top: 10px;
}

#heart::before, #heart::after {
  content: "";
  position: absolute;
  top: 0;
  width: 52px;
  height: 80px;
  border-radius: 50px 50px 0 0;
  background: red;
}

#heart::before {
  left: 50px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

#heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

<div id="heart"></div>

Fascinating, really great work! For others, do not forget to change the first `#heart:before {` to `#heart:before, #heart:after {`. Yotam said this though, but I was too fast and did not see this information while trying the code. — Avatar, Nov 15 '13 at 14:07
Maybe add another image after step 4 where the 2nd half is another color to better show the layers? To better show the 'trick' being applied :) — Martijn, Apr 28 '20 at 14:06
Also, the vendor prefixes are not needed for those properties :) I've also removed them from the question to simplify — Martijn, Apr 28 '20 at 14:06

Temani Afif · Answer 2 · 2022-01-25T14:53:44.763

A new idea with less of code:

.heart {
  display:inline-block;
  width: 200px; 
  aspect-ratio: 1;
  border-image: radial-gradient(red 69%,#0000 70%) 84.5% fill/100%;
  clip-path: polygon(-41% 0,50% 91%, 141% 0);
}

<div class="heart"></div>
<div class="heart" style="width:100px"></div>
<div class="heart" style="width:50px"></div>

Here is another idea using one element and relying on multiple backgrounds to achieve the heart shape. You can also easily adjust the size by only changing the width:

.heart {
  width:200px;
  background:
   radial-gradient(circle at 60% 65%, red 64%, transparent 65%) top left,
   radial-gradient(circle at 40% 65%, red 64%, transparent 65%) top right,
   linear-gradient(to bottom left, red 43%,transparent 43%) bottom left ,
   linear-gradient(to bottom right,red 43%,transparent 43%) bottom right;
  background-size:50% 50%;
  background-repeat:no-repeat;
  display:inline-block;
}
.heart::before {
  content:"";
  display:block;
  padding-top:100%;
}

<div class="heart">
</div>
<div class="heart" style="width:100px">
</div>
<div class="heart" style="width:60px">
</div>
<div class="heart" style="width:30px">
</div>

You can also use mask and you can have any kind of coloration:

.heart {
  width:200px;
  display:inline-block;
  -webkit-mask:
     radial-gradient(circle at 60% 65%, red 64%, transparent 65%) top left,
     radial-gradient(circle at 40% 65%, red 64%, transparent 65%) top right,
     linear-gradient(to bottom left, red 43%,transparent 43%) bottom left ,
     linear-gradient(to bottom right,red 43%,transparent 43%) bottom right;
  -webkit-mask-size:50% 50%;
  -webkit-mask-repeat:no-repeat;
  mask:
     radial-gradient(circle at 60% 65%, red 64%, transparent 65%) top left,
     radial-gradient(circle at 40% 65%, red 64%, transparent 65%) top right,
     linear-gradient(to bottom left, red 43%,transparent 43%) bottom left ,
     linear-gradient(to bottom right,red 43%,transparent 43%) bottom right;
  mask-size:50% 50%;
  mask-repeat:no-repeat;
  background:linear-gradient(red,blue);
}
.heart::before {
  content:"";
  display:block;
  padding-top:100%;
}

<div class="heart">
</div>
<div class="heart" style="width:100px;background:linear-gradient(45deg,grey 50%,purple 0)">
</div>
<div class="heart" style="width:60px;background:radial-gradient(red,yellow,red)">
</div>
<div class="heart" style="width:30px;background:blue">
</div>

How does it works?

The whole shape is combined using 4 gradients: 2 gradients to create the top part and 2 for the bottom parts. each gradient is taking 1/4 of size and placed at a corner.

Use a different color for each gradient to clearly identify the puzzle

.heart {
  width:200px;
  background:
   radial-gradient(circle at 60% 65%, red  64%, grey 65%) top left,
   radial-gradient(circle at 40% 65%, blue 64%, black 65%) top right,
   linear-gradient(to bottom left, green 43%,black 43%) bottom left ,
   linear-gradient(to bottom right,purple 43%,grey 43%) bottom right;
  background-size:50% 50%;
  background-repeat:no-repeat;
  display:inline-block;
  border:5px solid yellow;
}
.heart::before {
  content:"";
  display:block;
  padding-top:100%;
}

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

Amazing answer, do you mind kindly explain a little bit to how you achieve the effect in the first snnipet? — James, Feb 21 '22 at 01:58
@James here is an illustration to understand what the clip-path is doing: https://jsfiddle.net/7xb50yrm/ .. for the border part I invite you to read this answer to understand how it works: https://stackoverflow.com/a/56915094/8620333 — Temani Afif, Feb 21 '22 at 08:16

How to create a heart shape using CSS?

2 Answers2

CSS3 Mon Amour - A 4 Step Love Afair

How does it works?

Linked

Related