如何为CSS绘制的六边形设置右侧蓝色、其余区域黑色的双色样式？

可以通过线性渐变背景配合原有的clip-path来实现需求，无需额外嵌套元素。核心思路是利用渐变的颜色分割线，刚好对齐六边形右侧区域的左边界（即原clip-path中75%宽度的位置），再通过裁剪后的形状自动呈现所需的分色效果。

修改后的完整代码如下：

CSS代码 #

.hex {
  height: 115px;
  width: 118px;
  /* 线性渐变：75%宽度左侧为黑色，右侧为蓝色 */
  background: linear-gradient(to right, #000 75%, #1e90ff 75%);
  -webkit-clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  text-align-last: center;
}

HTML代码 #

<div class="hex"></div>

说明 #

• 渐变的分割位置75%对应原clip-path中右侧区域的左边界（75% 5%和75% 95%两个顶点的x坐标），确保黑色区域覆盖六边形的顶部、底部及左侧，蓝色区域精准填充右侧三角形部分。
• 可根据需求调整蓝色的具体色值（如#00f、#4287f5等），黑色也可替换为其他深色系。

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