<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<style>
.circle {
/*width:200px;
height:200px;*/
width: 150px;
height: 150px;
position: absolute;
border-radius: 50%;
/*background: #0cc;*/
background: #0B2DFF;
/*border: #f00 solid 1px;*/
}
.pie_left, .pie_right {
/*width:200px;
height:200px;*/
width: 150px;
height: 150px;
position: absolute;
top: 0;left: 0;
}
.left, .right {
display: block;
/*width:200px;
height:200px;*/
width:150px;
height:150px;
/*background:#00aacc;*/
background:#AFB9F9;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
/*transform: rotate(30deg);*/
transform: rotate(0deg);
}
.pie_right, .right {
/*clip:rect(0,auto,auto,100px);*/
clip:rect(0,auto,auto,75px);
}
.pie_left, .left {
/*clip:rect(0,100px,auto,0);*/
clip:rect(0,75px,auto,0);
}
.mask {
/*width: 150px;
height: 150px;*/
width: 112.5px;
height: 112.5px;
border-radius: 50%;
/*left: 25px;
top: 25px;*/
left: 18px;
top: 18px;
background: #FFF;
position: absolute;
text-align: center;
line-height: 112.5px;
font-size: 16px;
}
</style>
<div class="circle">
<div class="pie_left"><div class="left"></div></div>
<div class="pie_right"><div class="right"></div></div>
<div class="mask"><span>10</span>%</div>
</div>
<script>
$(function() {
$('.circle').each(function(index, el) {
var num = $(this).find('span').text() * 3.6;
if (num<=180) {
$(this).find('.right').css('transform', "rotate(" + num + "deg)");
} else {
$(this).find('.right').css('transform', "rotate(180deg)");
$(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
};
});
});
</script>
</body>
</html>
其中150px,75px,112.5px是等比例缩放,调整的时候根据比例进行调整就行了