HTML CSS examples for CSS Widget:Shape
Create a two-color circle
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- w w w . j a va 2 s .co m--> background: #ccc; } .circle { margin: 25px 0; width: 200px; height: 200px; border-radius: 50%; border: 12px solid transparent; background-size: 100% 100%, 100% 50%,100% 100%, 100% 50%; background-repeat: no-repeat; background-image: linear-gradient(white, white), linear-gradient(360deg, green 100%, lightgrey 100%), linear-gradient(360deg, red 100%, lightgrey 100%); background-position: center center, left top, right top, left bottom, right bottom; background-origin: content-box, border-box, border-box, border-box, border-box; background-clip: content-box, border-box, border-box, border-box, border-box; transform: rotate(90deg); } </style> </head> <body> <div class="circle"> </div> </body> </html>