css 画圆环百分比

直接贴代码：

html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" type="text/css" href="mycircle.css" />
    <title>圆环-百分比</title>
</head>
<body class="bk01-bg-body">
    <div class="kb01-circle">
        <div class="kb01-circle-chart01 kb01-circle-percent-circle kb01-circle-percent-circle-left">
            <div class="kb01-circle-chart01-left-rotate kb01-circle-left-content"></div>
        </div>
        <div class="kb01-circle-chart01 kb01-circle-percent-circle kb01-circle-percent-circle-right">
            <div class="kb01-circle-chart01-right-rotate kb01-circle-right-content"></div>
        </div>
        <div class="kb01-circle-chart01-inside kb01-circle-c-c-inside">1000</div>
    </div>
</body>
</html>

mycircle.css：

.kb01-circle {
  position: relative;
  margin: 0 auto;
  width: 170px;
  height: 170px;
}

.kb01-circle-chart01 {
    background: red;
}
.kb01-circle-chart01-inside {
    color: red;
}
.kb01-circle-chart01-left-rotate {
    /* transform: rotate(110deg);  角度调节 */
}
.kb01-circle-chart01-right-rotate {
    transform: rotate(20deg);
}

.kb01-circle-percent-circle {
  position: absolute;
  height: 100%;
  overflow: hidden;
}
.kb01-circle-percent-circle-left {
  left: 0;
  width: 85px;
  border-radius: 85px 0 0 85px/85px 0 0 85px;
}
.kb01-circle-left-content {
  position: absolute;
    content: ‘‘;
    width: 100%;
    height: 100%;
    transform-origin: right center;
    border-radius: 50px 0 0 50px/50px 0 0 50px;
    background: #e5edff;
}
.kb01-circle-percent-circle-right {
  right: 0;
  width: 85px;
  transform-origin: right center;
  border-radius: 0 85px 85px 0/0 85px 85px 0;
}
.kb01-circle-right-content {
  position: absolute;
  content: ‘‘;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  border-radius: 0 85px 85px 0/0 85px 85px 0;
  background: #e5edff;
}
.kb01-circle-c-c-inside {
  position: absolute;
  top: 34px;
  left: 34px;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 100%;
  font-size: 30px;
  font-weight: bold;
}

css 画圆环 百分比

css 画圆环百分比