HTML CSS examples for CSS Widget:Shape
Create Circle shape with Partial Border
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .wrapper {<!--from w ww .ja va2s . com--> position:relative; margin:20px; } .arc { position:absolute; top:0; left:0; width:100px; height:100px; border-radius:100%; border:1px solid; } .arc_start { border-color:transparent red red red; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .arc_end { border-color:red red red transparent; -webkit-transform: rotate(75deg); -moz-transform: rotate(75deg); -ms-transform: rotate(75deg); -o-transform: rotate(75deg); transform: rotate(75deg); } </style> </head> <body> <div class="wrapper"> <div class="arc arc_start"></div> <div class="arc arc_end"></div> </div> </body> </html>