How to make heart in CSS

 

HTML Code

 

<html>
<head>
<title>CSS Heart</title>
<link rel=”stylesheet” href=”main.css”>
</head>
<body>
<div class=”heart”></div>
</body>
</html>

 

Save This File As index.html

 

CSS Code

 

.heart{

position:relative;
margin:20px;
height:170;
width:200px;
}
.heart:before,
.heart:after{

content:””;
position:absolute;
width:100px;
height:160px;
background-color: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{
-webkit-transform:rotate(45deg);

transform:rotate(45deg);
-webkit-transform-origin:100% 100%;

transform-origin:100% 100%;

left:0;
}

 

Save This File As main.css

renewdev

I Am Developer And Want To Share My Knowledge With The World..:) ;) . I Have Another Social Networking Website (Renewchat) And For Designing Or Developing Of Website Purpose You Can Contact Me On Renew Coder .. :) ;)

Leave a Reply

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