如何用CSS创建弧形菜单项？附问题代码及效果需求

你当前的问题是用固定left/top定位导致窗口缩放时元素偏移，这是因为没有基于统一的圆心计算位置，而是硬写坐标。下面是能实现自适应弧形排列的方案：

核心思路 #

• 以父容器中心作为弧形的圆心，所有菜单项围绕这个圆心排列
• 用CSS变换（rotate+translate）计算位置，避免固定坐标的适配问题
• 通过CSS变量统一控制弧形参数，方便调整弧度、朝向和间隔

完整代码示例 #

HTML结构 #

<div id="menu">
  <img class="menu-item" src="你的图片地址1" alt="菜单项1">
  <img class="menu-item" src="你的图片地址2" alt="菜单项2">
  <img class="menu-item" src="你的图片地址3" alt="菜单项3">
  <img class="menu-item" src="你的图片地址4" alt="菜单项4">
  <img class="menu-item" src="你的图片地址5" alt="菜单项5">
  <img class="menu-item" src="你的图片地址6" alt="菜单项6">
</div>

CSS样式 #

/* 父容器作为弧形的圆心基准 */
#menu {
  position: relative;
  width: 300px; /* 可根据需求调整，也可用vw等自适应单位 */
  height: 300px;
  margin: 50px auto;
}

/* 统一菜单项基础样式 */
.menu-item {
  position: absolute;
  width: 43px;
  height: 36px;
  top: 50%;
  left: 50%;
  transform-origin: center center;
}

/* 用CSS变量统一控制弧形参数，方便修改 */
:root {
  --arc-radius: 120px; /* 弧形的半径，越大弧度越平缓 */
  --start-angle: 45deg; /* 弧形起始角度，控制朝向 */
  --angle-step: 30deg; /* 每个菜单项的角度间隔 */
}

/* 逐个设置菜单项的位置 */
.menu-item:nth-child(1) {
  transform: translate(-50%, -50%) rotate(var(--start-angle)) translate(0, -var(--arc-radius)) rotate(calc(-1 * var(--start-angle)));
}
.menu-item:nth-child(2) {
  transform: translate(-50%, -50%) rotate(calc(var(--start-angle) + var(--angle-step))) translate(0, -var(--arc-radius)) rotate(calc(-1 * (var(--start-angle) + var(--angle-step))));
}
.menu-item:nth-child(3) {
  transform: translate(-50%, -50%) rotate(calc(var(--start-angle) + var(--angle-step)*2)) translate(0, -var(--arc-radius)) rotate(calc(-1 * (var(--start-angle) + var(--angle-step)*2)));
}
.menu-item:nth-child(4) {
  transform: translate(-50%, -50%) rotate(calc(var(--start-angle) + var(--angle-step)*3)) translate(0, -var(--arc-radius)) rotate(calc(-1 * (var(--start-angle) + var(--angle-step)*3)));
}
.menu-item:nth-child(5) {
  transform: translate(-50%, -50%) rotate(calc(var(--start-angle) + var(--angle-step)*4)) translate(0, -var(--arc-radius)) rotate(calc(-1 * (var(--start-angle) + var(--angle-step)*4)));
}
.menu-item:nth-child(6) {
  transform: translate(-50%, -50%) rotate(calc(var(--start-angle) + var(--angle-step)*5)) translate(0, -var(--arc-radius)) rotate(calc(-1 * (var(--start-angle) + var(--angle-step)*5)));
}

代码说明 #

1. 父容器定位：#menu设为相对定位，它的中心就是弧形的圆心，所有菜单项基于这个中心计算位置
2. 变换逻辑：每个菜单项先通过translate(-50%, -50%)对齐父容器中心，然后旋转到对应角度，再平移到弧形半径位置，最后反向旋转保证图片本身不倾斜
3. 自适应特性：如果把父容器的width/height改成vw或百分比，窗口缩放时菜单项会自动跟着调整位置，不会偏移
4. 简化写法（可选）：如果用SCSS，可以用循环自动生成每个菜单项的样式，不用手动写6次：

#menu {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
}

.menu-item {
  position: absolute;
  width: 43px;
  height: 36px;
  top: 50%;
  left: 50%;
  transform-origin: center center;
}

$arc-radius: 120px;
$start-angle: 45deg;
$angle-step: 30deg;
$item-count: 6;

@for $i from 1 through $item-count {
  .menu-item:nth-child(#{$i}) {
    $current-angle: $start-angle + ($angle-step * ($i - 1));
    transform: translate(-50%, -50%) rotate($current-angle) translate(0, -$arc-radius) rotate(-$current-angle);
  }
}

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