HTML CSS examples for CSS Widget:Shape
Create heart shape
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #logo {<!--from ww w .ja v a2 s .c o m--> width:51%; height:51%; position:relative; } #heart { display:block; position:absolute; margin:19% 15%; z-index:2; width:71%; height:71%; } #heart-container { display:block; position:absolute; top:0; left:0; z-index:2; padding:51%; } #heart-container { border-radius:51%; behavior:; padding:51%; background:Chartreuse; border:3px solid yellow; color:blue; text-align:center; font:33px Arial, sans-serif; } #heart:before, #heart:after { position:absolute; content:""; left:91px; top:0; width:91px; height:131px; background:red; -moz-border-radius:51px 51px 0 0; border-radius:51px 51px 0 0; -webkit-transform:rotate(-46deg); -moz-transform:rotate(-46deg); -ms-transform:rotate(-46deg); -o-transform:rotate(-46deg); transform:rotate(-46deg); -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; box-shadow:11px 11px 100px pink; -webkit-transform:rotate(46deg); -moz-transform:rotate(46deg); -ms-transform:rotate(46deg); -o-transform:rotate(46deg); transform:rotate(46deg); -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="logo"> <div id="heart-container"> </div> <div id="heart"> </div> </div> </body> </html>