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.

<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.

.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:

.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.

.heart:after {
    top: -50%;
    right: 0;
}
.heart:before {
    top: 0;
    left: -50%;
}

heart

–EOF (The Ultimate Computing & Technology Blog) —