How to draw a heart using only CSS

The present article is intended for demonstration purposes and shows how to simply draw a heart using only CSS.

All styles of the heart shown below are applied to one div element.

The heart consists of two rectangles which overlay each other. Both rectangles have two mirrored rounded angles on the same side and have different inclination angles. Also they have the same color which makes them look like a heart.

CSS code:

div {
  position: relative;
  width: 100px;
  height: 175px;
  background-color: green;
  -webkit-border-radius: 50px 50px 0 0;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 50px 50px 0 0;
  -webkit-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  -o-transform: rotate(315deg);
  transform: rotate(315deg);
}

div:before {
  position: absolute;
  width: 175px;
  height: 100px;
  left: 0;
  bottom: 0;
  content: "";
  background-color: green;
  -webkit-border-radius: 50px 50px 0 0;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 0 50px 50px 0;
}

Live demo

If you want to see the structure of the heart, just change the color of the second rectangle which overlays the first one. The color must be changed from green to red.

Add the following styles to the ones above:

div:before {
  background-color: red;
}

Live demo