HTML CSS examples for CSS Widget:Shape
Create a half circle shape with border radius
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #halfCycle<!--from w ww.ja va 2s . co m--> { width: 23px; height: 43px; background-color: #383838; border-top-right-radius: 50px; border-bottom-right-radius: 50px; box-shadow: 2px 0 2px 0px #222; position:relative; overflow:hidden; } #halfCycle:after{ content:''; position:absolute; top:1px; right:1px; width:42px; height:39px; border-radius:100%; border:1px solid #000; } </style> </head> <body> <div id="halfCycle"> </div> </body> </html>