如何用CSS精准实现自适应弧形组件及悬停变色效果

需求描述 #

我希望通过CSS实现如图所示的弧形组件，要求鼠标悬停时弧形从灰色变为绿色；同时这些弧形需具备动态适配性，能够自动调整以适配父容器。
由于这些弧形本质是圆形的一部分，圆心位置不断变化，让它们在同一行排列十分棘手，请问有什么实现思路？

实现思路与优化代码 #

核心思路是用CSS变量统一管理弧形尺寸，通过位移调整让所有弧形底部对齐，配合flex布局实现自适应。以下是优化后的代码：

HTML结构 #

<div class="size-selector">
  <div class="size" style="--radius: 3em;">
    <span>S</span>
    <div class="arc"></div>
  </div>
  <div class="size" style="--radius: 3.5em;">
    <span>M</span>
    <div class="arc"></div>
  </div>
  <div class="size active" style="--radius: 5em;">
    <span>L</span>
    <div class="arc"></div>
  </div>
  <div class="size" style="--radius: 6em;">
    <span>XL</span>
    <div class="arc"></div>
  </div>
  <div class="size" style="--radius: 7em;">
    <span>XXL</span>
    <div class="arc"></div>
  </div>
</div>

CSS样式 #

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #fff;
}

.size-selector {
  display: flex;
  width: 100%;
  max-width: 800px;
}

.size {
  position: relative;
  text-align: center;
  font-size: 14px;
  color: gray;
  cursor: pointer;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.size span {
  margin-bottom: 10px;
  font-size: 18px;
  transition: color 0.3s;
}

.size .arc {
  width: calc(var(--radius) * 2);
  height: calc(var(--radius) * 2);
  border: 2px solid #ccc;
  border-radius: 50%;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
  /* 位移让弧形底部对齐 */
  transform: translateY(calc(var(--radius) / 2));
  transition: border-color 0.3s;
}

/* 悬停效果 */
.size:hover .arc {
  border-top-color: limegreen;
}
.size:hover span {
  color: limegreen;
}

/* 选中状态（示例） */
.size.active .arc {
  border-top-color: green;
}
.size.active span {
  color: green;
}

关键优化点 #

• CSS变量复用：用--radius变量定义每个弧形的半径，所有尺寸计算基于这个变量，避免重复代码
• 底部对齐技巧：通过transform: translateY(calc(var(--radius)/2))，把上半圆的底部拉到同一水平线——因为上半圆的圆心在自身顶部中点，下移半径的一半就能让底部和其他元素对齐
• 自适应布局：flex-grow:1让每个尺寸项自动平分父容器宽度，父容器设置width:100%即可适配不同屏幕
• 简洁过渡效果：统一设置transition属性，让悬停和状态切换更流畅

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