如何用CSS实现部分圆点的双色半分效果？现有代码失效

利用CSS线性渐变（linear-gradient）可以轻松实现半圆点的双色分割效果，以下是具体修改方案：

1. 更新CSS代码 #

保留原有全色圆点样式的基础上，新增双色半分的样式类，支持灵活设置第二种颜色：

.holder {
  margin-right: 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
/* 原有全色样式保留 */
.h1 { background: blue; }
.h2 { background: red; }
.h3 { background: green; }
.h4 { background: grey; }
.h5 { background: yellow; }

/* 核心双色半分样式：左红右指定颜色 */
.holder.half-red {
  --second-color: grey; /* 默认第二种颜色为灰色 */
  background: linear-gradient(to right, red 50%, var(--second-color) 50%);
}
/* 针对不同第二种颜色的变体 */
.holder.half-red-blue { --second-color: blue; }
.holder.half-red-green { --second-color: green; }
.holder.half-red-yellow { --second-color: yellow; }

/* 可选：上下分割的半分样式 */
.holder.half-red-top {
  background: linear-gradient(to bottom, red 50%, var(--second-color) 50%);
}

/* 原有表格样式保留 */
.displayData th {
  writing-mode: vertical-rl;
  min-width: 30px;
  transform: rotate(180deg);
  text-transform: capitalize;
  padding:10px;
  text-align:start;
  margin:10px;
}
.displayData td {
  min-width: 30px;
  height: 30px;
  background:none;
}

2. 修改HTML代码 #

将需要设置半分样式的圆点元素，替换为对应的类即可。同时修复原HTML中无效的自闭合标签问题：

<table class="displayData">
<tr>
  <th>Drafted</th>
  <th>Submitted</th>
  <th>Approved</th>
  <th>Processed</th>
</tr>
<tr>
  <!-- 示例：左红右灰的圆点 -->
  <td><div class="holder half-red"></div></td>
  <!-- 示例：左红右蓝的圆点 -->
  <td><div class="holder half-red-blue"></div></td>
  <!-- 示例：左红右绿的圆点 -->
  <td><div class="holder half-red-green"></div></td>
  
  <td>No</td>
  <td><div class="holder h5"></div></td>
  <td><div class="holder h4"></div></td>
  <td><div class="holder h4"></div></td>
  <td>Drafted</td>

  <td><div class="holder h3"></div></td>
  <td><div class="holder h3"></div></td>
  <td><div class="holder h4"></div></td>
  <td>Submitted approved</td>

  <!-- 剩余元素按此逻辑调整，注意所有<div/>改为</div> -->
</tr>
</table>

额外提示 #

• 若需要对角线分割的效果，可修改渐变角度，例如linear-gradient(45deg, red 50%, blue 50%)
• 原HTML中的<div/>是无效写法（div不属于空元素），必须改为</div>，否则会导致DOM结构异常

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