.circle { width: 200px; height: 200px; position: absolute; border-radius: 50%; background: #0cc; }
.circle_left,.circle_right { width: 200px; height: 200px; position: absolute; top: 0;left: 0; } 
.left,.right {display: block; width:200px; height:200px; background:#00aacc; border-radius: 50%; position: absolute; top: 0; left: 0; transform: rotate(0deg); } 
.circle_right,.right {clip:rect(0,auto,auto,100px); }
.circle_left,.left {clip:rect(0,100px,auto,0); } 
.mask { width: 150px; height: 150px; border-radius: 50%; left: 25px; top: 25px; background: #FFF; position: absolute; text-align: center; line-height: 150px; font-size: 16px; }