- 创建两块带有overflow: hidden属性的div，拼凑成一个正方形
- 合理利用border的上右（或下左）边框和transform的旋转属性，基于两个div实现一个环形边框
- 两个环形边框各旋转180°，可以将环形边框全部隐藏
- 基于你的需求，动态旋转一个或两个div，可以实现进度条的效果
代码如下
<html>
<body>
<div style="margin-bottom: 20px">
<input id="progress" type="number" />
<button onclick="set()">设置进度</button>
</div>
<div class="wrap">
<div class="left">
<div class="progress" id="l"></div>
</div>
<div class="right">
<div class="progress" id="r"></div>
</div>
</div>
</body>
<script>
function set() {
let p = document.getElementById('progress').value;
if (p > 100 || p < 0) {
alert('进度需为0~100！');
return;
}
if (p <= 50) {
document.getElementById('r').style.transform = `rotate(${-135 + (p * 18) / 5}deg)`;
} else {
document.getElementById('r').style.transform = 'rotate(45deg)';
document.getElementById('l').style.transform = `rotate(${-135 + ((p - 50) * 18) / 5}deg)`;
}
}
</script>
<style>
.wrap {
display: flex;
position: relative;
width: 200px;
height: 200px;
}
.left {
position: relative;
left: 0;
width: 100px;
height: inherit;
overflow: hidden;
}
.right {
position: relative;
right: 0;
width: 100px;
height: inherit;
overflow: hidden;
}
.left .progress {
width: 200px;
height: 200px;
border: solid 20px transparent;
border-bottom: solid 20px aqua;
border-left: solid 20px aqua;
border-radius: 50%;
box-sizing: border-box;
transform: rotate(-135deg);
}
.right .progress {
position: relative;
left: -100px;
width: 200px;
height: 200px;
border: solid 20px transparent;
border-top: solid 20px aqua;
border-right: solid 20px aqua;
border-radius: 50%;
box-sizing: border-box;
transform: rotate(-135deg);
}
</style>
</html>