.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;
}