Creating heart shape

Html-tutorial - Creating heart shape, CSS heart shape

Creating heart shape

How to create hear shape just by using simple css code?

<html>
 <head>
 <style>
 #heart { 
 position: relative; 
 width: 100px; 
 height: 90px; 
 } 
 #heart:before, #heart:after { 
 position: absolute; 
 content: ""; 
 left: 50px; 
 top: 0; 
 width: 50px; 
 height: 80px; 
 background: red; 
 -moz-border-radius: 50px 50px 0 0; 
 border-radius: 50px 50px 0 0; 
 -webkit-transform: rotate(-45deg); 
 -moz-transform: rotate(-45deg); 
 -ms-transform: rotate(-45deg); 
 -o-transform: rotate(-45deg); 
 transform: rotate(-45deg); 
 -webkit-transform-origin: 0 100%; 
 -moz-transform-origin: 0 100%; 
 -ms-transform-origin: 0 100%; 
 -o-transform-origin: 0 100%; 
 transform-origin: 0 100%; 
 } 
 #heart:after { 
 left: 0; 
 -webkit-transform: rotate(45deg); 
 -moz-transform: rotate(45deg); 
 -ms-transform: rotate(45deg); 
 -o-transform: rotate(45deg); 
 transform: rotate(45deg); 
 -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%; 
  -ms-transform-origin: 100% 100%; 
  -o-transform-origin: 100% 100%; 
  transform-origin :100% 100%; 
 }
 </style>
 </head>
 <body>
 <div id="heart"></div>
 </body>
 </html>

Copy the above code and name it as some html file. You can see an awesome heart shape on the browser. Have fun ;)

The topic on Html-tutorial - Creating heart shape is posted by - Math

Hope you have enjoyed, Html-tutorial - Creating heart shapeThanks for your time

Html-tutorial - Creating heart shape, CSS heart shape

Creating heart shape

Tech Bluff