HTML CSS examples for CSS Widget:Shape
Using border radius to create leaf shape
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .login_leaf_class<!-- www .j ava 2s .c om--> { border:solid #000 3px; border-top-left-radius:70% 60% ; border-bottom-right-radius:70% 60%; -moz-border-top-left-radius:70% 50%; -moz-border-bottom-right-radius:70% 50%; } div#login { position:relative; padding:10px; overflow:hidden; margin-top:10%; margin-right:5%; color:#0000; float:right; width:300px; height:200px; font-weight:900; background:#FFB3FF; background:rgba(255,179,255,0.8); } .my { float:right; display:inline; background:#003300; color:#FFF; font-weight:900; padding:4px; width:100px; height:50px; border-radius:4px; border-top-left-radius:99.9% 100%; border-bottom-right-radius:99.9% 100%; -moz-border-top-left-radius:99.9% 100%; -moz-border-bottom-right-radius:99.9% 100%; border:3px solid #fff; } </style> </head> <body> <div id="login" class="transparent-div login_leaf_class"> <input class="pointer my" id="submit_button" type="submit" title="SUBMIT" value="SUBMIT"> </div> </body> </html>