How To Create Heart Shape with CSS


CSS3 elevates the feasibility of what we can build on websites using just HTML and CSS. You can find amazing examples that we have previously featured. But let’s not get too far ahead of ourselves, a complicated design will need codes that may give you a headache.

heart shape css

Instead, we are going to create something simple to help you understand shapes and positioning with CSS first, before venturing to more advanced designs. Since Valentine’s day is just around the corner, let’s create a heart shape using HTML and CSS.

The Basics

Basically, we can create a new shape by joining one or more basic shapes, like rectangles and circles. If we examine a heart shape we can find that it is made up of two circles and a rectangle combined. HTML elements are essentially a square or rectangle. Thanks to CSS3 border radius we can transform a rectangle into a circle easily.

Begin by adding a <div> element as the foundation of our heart shape.

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

Then, we make it a square by specifying the width and the height equally. Choose a background color you like.

.heart-shape{
	position: relative;
	width: 200px;
	height: 200px;
	background-color: rgba(250,184,66, 0.8);
}

Next up, we will make the circles.

Rather than add new elements, we will make use of the pseudo-elements, :before and :after. We first set the :before pseudo-elements as our first circle. We make it a square with equal size on the width and height just like we did with the div. We then transform it into a circle by giving it border-radius of 50% and put it on the left side of the square.

.heart-shape:before{
	position: absolute;
	bottom: 0px;
	left: -100px;
	width: 200px;
	height: 200px;
	content: '';
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	background-color: rgba(250,184,66, 0.8);
}

Together with the square we will have a result like this:

Freebie Release: 15 Valentine’s Day Patterns by Freepik

After that, we create the second circle with the pseudo-element :after with the same styles as the first circle we created. Then, we also position it on the top of the square.

.heart-shape:after{
	position: absolute;
	top: -100px;
	right: 0px;
	width: 200px;
	height: 200px;
	content: '';
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;

	background-color: rgba(250,184,66, 0.8);
}

The results are as follows:

Freebie Release: 15 Valentine’s Day Patterns by Freepik

We can combine these two same styles by grouping the pseudo-element selectors as follows:

.heart-shape:before,
.heart-shape:after{
	position: absolute;
	width: 200px;
	height: 200px;
	content: '';
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	background-color: rgba(250,184,66, 0.8);
}
.heart-shape:before{
	bottom: 0px;
	left: -100px;
}
.heart-shape:after{
	top: -100px;
	right: 0px;
}

Ta-da! We have a heart shape, although it’s not in the right direction yet. To straighten it up, we will use CSS3 Transformation.

Transformation can be given to the main elements of shape; here, that means the square. When transformed, the pseudo-element will automatically change its position following the main element.

Here we will rotate the heart so it is seen “standing”.

.heart-shape{
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

And this is what our heart looks like now.

Freebie Release: 15 Valentine’s Day Patterns by Freepik

The Result:

The complete code of the heart shape above is as follows, in HTML:

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

And on our CSS, it will be like this:

.heart-shape{
	position: relative;
	width: 200px;
	height: 200px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	background-color: rgba(250,184,66, 1);
}
.heart-shape:before,
.heart-shape:after{
	position: absolute;
	width: 200px;
	height: 200px;
	content: '';
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	background-color: rgba(250,184,66, 1);
}
.heart-shape:before{
	bottom: 0px;
	left: -100px;
}
.heart-shape:after{
	top: -100px;
	right: 0px;
}

Notice that we now set the alpha channel of the rgba(250,184,66, 1) in the background to 1 to remove the transparency. Now this is what our Heart looks.

Freebie Release: 15 Valentine’s Day Patterns by Freepik

Now that we have a perfect heart shape, we can replace the background to another color (e.g. pink or red) with ease. The only downside here is that we could not add a border to the shape due to the stacked elements. Adding a border line will make the heart look weird.

Conclusion

With CSS3 creating a shape like a Heart shape is now easily doable. The border-radius property allows us to make elements or even a pseudo-element into a circle. With CSS3 transformation, we can rotate or move the coordinates of the object with ease.

You are limited only by your creativity and imagination!

Leave a Reply