Hearts are complicated organs in real life, but they're really just two circles and a square as far as the shape goes.

The trick is that we can not only draw this in CSS, but do it with a single <div>, thanks to pseudo-elements. In this case, we will make the square our main element, then use the :before and :after pseudo elements to draw the circles.

Let's start with the HTML markup which is a single line:

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

Now let's dig into the CSS and begin with the square as our main element. We'll give it the .heart class name we put into the HTML:

.heart {
  background-color: red;
  height: 30px;
  transform: rotate(-45deg);
  width: 30px;
}

That gives us a perfect red square that is 30px wide by 30px tall and rotated 45 degrees counter-clockwise:

We can draw the two circles together by combining the properties for both the :before and :after psuedo elements of th main .heart element:

.heart:before,
.heart:after {
  content: "";
  background-color: red;
  border-radius: 50%;
  height: 30px;
  position: absolute;
  width: 30px;
}

That gets us very close to what we need! All three shapes are on the screen, but the circles overlap one another making it look as though we are missing the left one. Let's move the :before pseudo element over to the left side.

.heart:before {
  top: -15px;
  left: 0;
}

That looks so much better...

Now you have a method for drawing the shape of a heart in pure CSS on a single element. Go and share the love!