HTML CSS examples for CSS Widget:Shape
Drawing a shape with half circle
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> div {<!-- ww w.j a v a 2 s .c om--> width:301px; height:201px; overflow:hidden; position:relative; left:100px; top:51px; } div:before { content:''; position:absolute; top:0; left:-100px; height:100%; width:201px; border-radius:51%; box-shadow:0 0 0 1001px red; } body { background:url('https://www.java2s.com/style/demo/Google-Chrome.png'); } </style> </head> <body> <div></div> </body> </html>