如何为HTML表格单元格局部着色并在单元格内绘制自定义绿色形状？

一、HTML表格单元格局部添加颜色的方法 #

要实现单元格局部着色，核心是在单元格内嵌入元素或利用CSS伪元素控制局部区域的样式，常用两种方式：

1. 嵌入内部元素（div/span）
   给单元格内的元素设置块级显示，通过指定宽高、背景色和位置来实现局部色块。优化你现有代码的示例：

   .partial-color {
     display: block;
     background: #00f000;
     width: 70%; /* 控制局部宽度 */
     height: 100%;
     margin-left: auto; /* 靠右对齐 */
   }
   

   <td>
     <div class="partial-color"></div>
   </td>
   

   这样就能在单元格右侧生成占70%宽度的绿色块。

2. 使用CSS伪元素
   无需额外HTML标签，给单元格添加类后通过伪元素生成局部色块：

   .cell-partial-green::before {
     content: "";
     display: block;
     background: #00f000;
     width: 50%;
     height: 50%;
     float: right; /* 定位到右上角 */
   }
   

   <td class="cell-partial-green"></td>
   

二、绘制目标绿色形状 #

针对参考的右上角带切角的绿色形状，提供两种实现方案：

方案1：clip-path 实现切角色块 #

通过裁剪路径直接生成所需形状，直观易调整：

.target-shape {
  display: block;
  width: 100%;
  height: 100%;
  background: #00f000;
  /* 右上角切出三角形，数值可按需调整 */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 20%, 20% 0);
}

<td>
  <div class="target-shape"></div>
</td>

修改clip-path中的20%数值可调整切角大小，数值越小切角越窄。

方案2：伪元素模拟切角（兼容旧浏览器） #

用白色三角伪元素覆盖在绿色单元格右上角：

.cell-with-shape {
  position: relative;
  background: #00f000;
}
.cell-with-shape::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  /* 生成白色等腰直角三角 */
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-top: 20px solid #fff;
  border-right: 20px solid #fff;
}

<td class="cell-with-shape"></td>

完整优化代码示例 #

table{
  font-family: arial, sans-serif;
  width: 90%;
  border-collapse: collapse;
  margin: 50px;
}
td,th{
  border: 1px solid #ddd;
  padding: 10px;
  position: relative; /* 为伪元素定位准备 */
}
th{
  background-color: #ddd;
}
.cent{
  background: blue;
  color: aqua;
  width: 100%;
  height: 100%;
  display: block;
}
/* 局部颜色样式 */
.partial-color {
  display: block;
  background: #00f000;
  width: 70%;
  height: 100%;
  margin-left: auto;
}
/* 目标形状样式 */
.target-shape {
  display: block;
  width: 100%;
  height: 100%;
  background: #00f000;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 20%, 20% 0);
}

<table>
  <tr>
    <th>Janvier</th>
    <th>Fevrier</th>
    <th>Mars</th>
    <th>Avril</th>
    <th>Mai</th>
    <th>Juin</th>
  </tr>
  <tr>
    <td>cc</td>
    <td><span class="cent">cc</span></td>
    <td><div class="partial-color"></div></td>
    <td><div class="target-shape"></div></td>
    <td></td>
    <td></td>
  </tr>
</table>

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