如何实现跨独立元素的连续无缝四色渐变圆形饼状导航

核心实现逻辑 #

要实现跨独立菜单项的无缝渐变，核心是放弃「给每个菜单项单独设置渐变」的思路，改为所有菜单项共用一份和整个导航容器尺寸完全一致的渐变底，再通过背景定位让每个菜单项只显示对应区域的渐变片段，拼合后自然形成连贯无断裂的整体效果。
针对象限饼图的渐变形态，使用conic-gradient（锥形渐变）实现比线性/径向渐变更适配，可直接按角度分配四个主色的区间，实现相邻颜色的平滑过渡。

关键调整点 #

• 修复原代码语法错误：移除第三项样式中冗余的误输入字符a，修正HTML列表结构为<li>包裹<a>的标准语义结构
• 给所有菜单项设置同一份锥形渐变，渐变尺寸与外层圆形导航容器尺寸完全一致，禁止背景随单个菜单项缩放
• 按菜单项所在象限单独设置背景偏移量，让四个区块的渐变精准对齐
• hover效果不直接覆盖背景色，改用伪元素实现半透明遮罩，保留渐变完整性的同时实现交互反馈

完整代码 #

CSS部分 #

ul {
  margin: 100px auto;
  padding: 0;
  position: relative;
  width: 20em;
  height: 20em;
  border-radius: 100%;
  transform: rotate(45deg);
  overflow: hidden;
  list-style: none;
}

ul li a {
  position: absolute;
  width: 10em;
  height: 10em;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
  /* 所有菜单项共用同一份和容器等大的锥形渐变 */
  background: conic-gradient(
    from 45deg,
    #6a3fc5 0deg 90deg,
    #f44336 90deg 180deg,
    #009688 180deg 270deg,
    #ffc107 270deg 360deg
  );
  background-size: 20em 20em;
  overflow: hidden;
  text-decoration: none;
}

/* 给每个菜单项加hover遮罩，不覆盖渐变 */
ul li a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.5s ease;
}

ul li a:hover {
  cursor: pointer;
  z-index: 19;
}

ul li a:hover::after {
  opacity: 1;
}

/* 文字反向旋转保持正向 */
ul li a span {
  transform: rotate(-45deg);
  position: relative;
  z-index: 1;
  font-weight: 500;
}

/* 四个象限分别定位+偏移背景，实现渐变无缝拼接 */
ul li:nth-child(1) a {
  top: 0;
  left: 0;
  border-top-left-radius: 100%;
  background-position: 0 0;
}
ul li:nth-child(1) a:hover {
  transform: translate(-10px, -10px);
}

ul li:nth-child(2) a {
  top: 0;
  left: 10em;
  border-top-right-radius: 100%;
  background-position: -10em 0;
}
ul li:nth-child(2) a:hover {
  transform: translate(10px, -10px);
}

ul li:nth-child(3) a {
  top: 10em;
  left: 0;
  border-bottom-left-radius: 100%;
  background-position: 0 -10em;
}
ul li:nth-child(3) a:hover {
  transform: translate(-10px, 10px);
}

ul li:nth-child(4) a {
  top: 10em;
  left: 10em;
  border-bottom-right-radius: 100%;
  background-position: -10em -10em;
}
ul li:nth-child(4) a:hover {
  transform: translate(10px, 10px);
}

HTML部分 #

<ul class="menu">
  <li class="item">
    <a href="/"><span>Targeting</span></a>
  </li>
  <li class="item">
    <a href="/"><span>Optimization</span></a>
  </li>
  <li class="item">
    <a href="/"><span>Enablement</span></a>
  </li>
  <li class="item">
    <a href="/"><span>Measurement</span></a>
  </li>
</ul>

效果说明 #

上述代码实现的渐变会在四个菜单项之间完全无缝衔接，紫色、红色、青色、黄色四个主色分别位于四个象限中心，相邻颜色在区块边界处自然平滑过渡，每个菜单项为独立可交互元素，hover时保留原有位移效果，同时通过半透明遮罩给出反馈，不会破坏整体渐变的完整性。
如果需要调整颜色过渡的柔和度，只需要修改conic-gradient里的色标位置即可，比如把硬边界的色标拉开距离，就能得到更柔和的混色效果。如果需要菜单项之间的分隔线，不要用border实现，可给每个菜单项加1px的内阴影，避免打断渐变连贯性。

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