直接贴代码：
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; }