CSStricks

How to Draw a Heart using CSS3?

We have seen many drawing of hearts using math equations [here] and [here], the following demonstrates how to draw (or make) a heart using the pure CSS3 techniques.

First, you need to define a container, e.g. using the div and assign it with the heart class/style name.

1
<div class='heart'></div>

Now, let’s make it a red square, but also rotate it by 45 degree, which makes it essentially a rhombus/diamond.

1
2
3
4
5
6
7
8
9
10
11
.heart {
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    background: red;
    position: relative;
    width: 200px;
    height: 200px;
}

Now, through the :after and :before elements, we draw to idendical circles:

1
2
3
4
5
6
7
8
9
.heart:before, .heart:after {
    content: '';
    width: 200px;
    height: 200px;
    border-radius: 100%;
    position: absolute;
    display: block;
    background: red;
}

and move these circles to the right positions of the div element.

1
2
3
4
5
6
7
8
.heart:after {
    top: -50%;
    right: 0;
}
.heart:before {
    top: 0;
    left: -50%;
}

heart

heart