How to make a Heart using only CSS
By Saurabh SinghIn 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,
- Make an HTML5 video in slow motion using DOM playbackRate property
- Endless or Infinite Rotate Animation in CSS
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:
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