In this post, we will learn how to make heart shape with the help of CSS. In CSS, we can easily make heart shape. For this, we just have to follow some easy steps.


How To Create Heart Shape with CSS ?


Create Heart Shape in CSS

In CSS, we can make heart shape with two methods. We will discuss about both those methods:

Method : 1

In this method, we will make a box and then rotate it at an angle of 45deg. After this, we will make two boxes on this box itself and place one box on the top and place the other box on the right, and rotate it at an angle of -90deg.

To create a heart shape with this method, we follow the steps given below:

Step 1 :  In this step, write the HTML code given below.

<!DOCTYPE html>
<html>
<head>
<title>How To Create Heart Shape with CSS ?</title>
<style>

</style>
</head>
<body>

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

</body>
</html> code-box

Step 2 :  In this step, write the CSS code given below.

/* Create a container box around the heart */
.heartBox {
height: 300px;
width: 300px;
background-color: #f1f1f1;
position: relative;
}

/* Create a box and rotate at 45deg */
.heart {
background-color: #e03e62;
height: 150px;
width: 150px;
margin: auto;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
transform: rotate(45deg);
border-radius: 0 0 10px 0;
}

/* Create two boxes before and after .heart div. */
.heart:before,
.heart:after {
position: absolute;
content: "";
height: 60%;
width: 100%;
background-color: #e03e62;
border-radius: 75px 75px 0 0;
}

/* Place the box made before the div in the top. */
.heart:before {
top: -59%;
}

/* Place the box made after the div in the right side and rotate at -90deg. */
.heart:after {
transform: rotate(-90deg);
right: 78%;
top: 20%;
} code-box

Method : 2

In this method, we make a box and rotate it at an angle of 45deg. Then make another box above this box and rotate it at an angle of 90deg. Then when you turn the corners of these two boxes, a heart shape is formed.

To create a heart shape with this method, we follow the steps given below:

Step 1 : In this step, we write HTML code (This HTML code is same as Method 1 HTML code).

Step 2 : In this step, write the CSS code as follows:

/* Create a container box around the heart */
.heartBox {
height: 300px;
width: 300px;
background-color: #f1f1f1;
position: relative;
}

/* Create a box and rotate at 45deg */
.heart {
background-color: #e03e62;
height: 200px;
width: 125px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform: rotate(45deg);
border-radius: 100px 100px 7px 0;
}

/* Create a box before .heart div and rotate it at 90deg and place it left side */
.heart:before {
position: absolute;
content: "";
height: 100%;
width: 100%;
background-color: #e03e62;
transform: rotate(90deg);
bottom: -19%;
left: -30%;
border-radius: 0 7px 100px 100px;
} code-box

It is quite easy to make a heart shape with both methods. You can make a heart shape using the method you like.

Summary

In this post we learn how to create heart shape with CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post