How to make a Heart using only CSS

In this tutorial, I will show you how easily you can make a heart using CSS. I’m styling it inside a head tag in a style tag. In body, I’m taking a div class name as heart and only styling that. This styling is known as internal styling.

You can also learn,

Create heart using CSS

Here I am providing an CSS code to create a red heart. You can customize it to make changes to this heart.

<!DOCTYPE html>
<html>
<head>
<style>
.heart
{
position:absolute;
top: 70px;
left: 95px;
width:200px;
height:170px;
margin:175px;
opacity:.8;
}

.heart:before,.heart:after
{
position: absolute;
content: "";
width: 100px;
height:160px;
background :red;
border-radius:50px 50px 0 0;
}
.heart:before{
left:100px;
-webkit-transform-rotate(-45deg);
transform:rotate(-45deg);
-webkit-transform-origin:0 100%;
transform:origin:0 100%;

}
.heart:after{
left:30px;
top:-70px;
-webkit-transform-rotate(45deg);
transform:rotate(45deg);
-webkit-transform-origin:0 100%;
transform:origin:100% 100%;
}

</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>

The output of this file will look like this if you run on a browser:

create a heart using css

red heart using css

As you can see above I have created a div class in the body.

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

We can identify the div by its class nameĀ heart.



You may also like to learn

Create CSS Bounce Effect with CSS3 Animation

Leave a Reply

Your email address will not be published. Required fields are marked *