HTML CSS examples for CSS Widget:Shape
Creating CSS3 shape to replace image
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- w w w. ja va 2 s .c om--> background:gray } div.fnd { background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat; width:100%; height:701px; } div.shape { width:41px; height:326px; background:Chartreuse; position:relative; top:0px; left:64px; z-index:4; border-left:11px solid yellow; box-shadow:-4px 0px 4px -2px blue; } div.shape:before { content:""; width:185px; background:pink; height:181px; border-radius:100px; position:absolute; top:71px; left:-61px; z-index:0; box-shadow:-4px 0px 4px -2px OrangeRed; } div.shape:after { content:""; display:block; width:202px; height:321px; position:absolute; left:-62px; top:0px; background:-webkit-radial-gradient(0 100%, circle, rgba(231, 243, 255, 0) 0px, grey 0px), -webkit-radial-gradient(100% 100%, circle, rgba(231, 243, 255, 0) 100px, rgb(231, 243, 255) 102px), -webkit-radial-gradient(100% 0, circle, rgba(231, 243, 255, 0) 100px, rgb(231, 243, 255) 102px), -webkit-radial-gradient(0 0, circle, rgb(231, 243, 255) 0px, rgb(231, 243, 255) 0px); background-position:bottom left, bottom right, top right, top left; -webkit-background-size:51% 51%; background-repeat:no-repeat; clip:rect(0px 151px 326px 61px); z-index:2; } div.shape>div { width:185px; background:BlueViolet; height:162px; border-radius:100px; position:relative; z-index:3; top:81px; left:-51px } </style> </head> <body> <div class="shape"> <div></div> </div> </body> </html>