如何实现可按百分比动态调整的CSS双半圆效果？

需求说明 #

• 创建两个半圆：灰色半圆作为底色，红色半圆从灰色半圆顶部开始延伸，长度可根据给定百分比动态调整
• 优化页面元素的对齐效果，项目使用Tailwind CSS（刚接触）

当前实现代码 #

CSS 代码 #

#cpoints {
    padding: 20px;
    background-color: white;
    border-radius: 5px;
}
.rotated-half-circle {
  /* 绘制基础圆形 */
  width: 90px;
  height: 90px;
  border: 13px solid lightgrey;
  border-radius: 50%;
  /* 裁剪为半圆 */
  border-bottom-color: transparent;
  border-left-color: transparent;
  /* 旋转调整位置 */
  transform: rotate(-45deg);
}
.rotated-half-circle-party {
  /* 绘制红色圆形 */
  width: 90px;
  height: 90px;
  border: 18px solid red;
  border-radius: 50%;
  /* 裁剪为半圆 */
  border-bottom-color: transparent;
  border-left-color: transparent;
  /* 旋转调整位置 */
  transform: rotate(-135deg);
}
.righta {
  margin-left: auto; 
  margin-right: 0;
}

HTML 代码 #

<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<nav id="sidebar" class="sidebar close"></nav>
<section  class="home">
    <div id="cpoints">
      <div class="h-26 grid grid-cols-3 gap-4 content-center">
        <div>
          <div class="herotext">
            <h4 class="divisionof">The federal division of</h4>
            <h1 class="seattitle" id="title"><?php echo $seat2;?></h1>
            <h2 class="state" id="state"><?php echo $state[0];?></h2>
          </div>
        </div>
        <div></div>
        <div class="place-self-center">
          <div>
            <div class="rotated-half-circle absolute" style="right: 15%;"></div>
            <div class="rotated-half-circle-party absolute" style="right: 15%;"></div>

            <p class="relative pt-5 pb-10 bd-white" style="bottom: -42px; right:-5%; background-color: white;"> 0.0% swing to XXX</p>
          </div>
        </div>
      </div>
      <br>
      <hr>
      <p><b>Population</b>: <span id="population"><?php echo $population[0];?></span>   <b>Classification</b>: <?php echo $classification[0];?></p>
    </div>
</section>
</body>

效果现状与目标 #

• 当前效果：灰色半圆为固定底色，红色半圆是固定角度的静态半圆，无法根据百分比动态调整长度
• 目标效果：红色半圆从灰色半圆顶部开始，根据百分比动态覆盖灰色半圆的对应区域，实现类似进度条的动态效果

待解决问题 #

1. 如何实现红色半圆的长度随给定百分比动态变化？
2. 如何优化页面元素的对齐，让半圆和下方文字的布局更规整？

内容的提问来源于stack exchange，提问作者Zak