.circle { width:100px; height:100px; border-radius:50%; background:-webkit-radial-gradient(bottom left,circle,#f4f655,#b8f888,#42fcfb); margin:0 auto; position:relative; } .pie_left,.pie_right { width:100px; height:100px; position:absolute; top:0; left:0; } .left,.right { display:block; width:100px; height:100px; background:#5bc6fc; border-radius:50%; position:absolute; top:0; left:0; /*transform:rotate(30deg); */ } .pie_right,.right { clip:rect(0,auto,auto,50px); } .pie_left,.left { clip:rect(0,50px,auto,0); } .mask { width:80px; height:80px; border-radius:50%; left:10px; top:10px; background:#07a3fa; position:absolute; text-align:center; line-height:80px; font-size:16px; color:#fff; }