HTML CSS examples for CSS Widget:Shape
Making tomb shape
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .my-icon {<!-- w w w . j a v a 2 s. co m--> position:relative; display:inline-block; width:11em; height:7em; border:solid Chartreuse; top:3em; text-align:center; padding-top:2em; font-family:sans-serif; text-transform:uppercase; z-index:6; background-color:yellow; } .my-icon::before { position:absolute; border:3em solid blue; border-bottom:none; border-top-right-radius:3em; border-top-left-radius:3em; left:4em; top:-3em; content:''; z-index:4; } .my-icon::after { position:absolute; border:3.6em solid pink; border-bottom:none; border-top-right-radius:3.6em; border-top-left-radius:3.6em; left:3.6em; top:-3.6em; content:''; z-index:2; } </style> </head> <body> <span class="my-icon">Lorem ipsum do</span> </body> </html>