HTML CSS examples for CSS Widget:Shape
Double curved shape
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .ghost {<!--from w ww . j ava 2s.c om--> position:relative; width:401px; height:301px; margin:0 auto; overflow:hidden; } .ghost:before, .ghost:after { content:''; position:absolute; } .ghost:before { bottom:0; right:51%; width:71%; height:31%; transform-origin:100% 100%; transform:skewY(31deg) rotate(21deg); box-shadow:-100px -100px 0px 100px Chartreuse; border-top-right-radius:31% 100%; } .ghost:after { top:0; right:0; transform-origin:100% 0; transform:skewX(-11deg) rotate(-21deg); box-shadow:none; height:108px; width:174px; border-top-left-radius:91% 100%; box-shadow:-31px -31px 0px 30px yellow, 61px -111px 0px 110px blue; } </style> </head> <body> <div class="ghost"> </div> </body> </html>