如何用CSS的rect()在TD单元格右上角绘制红色小矩形？

直接修改目标单元格的background属性，用多层背景叠加实现，无需额外元素：

<table style="border: 1px solid black;">
  <tr>
    <td style="width: 200px;">aaaaaa</td>
  </tr>
  <tr>
    <td style="background: yellow, linear-gradient(red, red) top right / 30px 15px no-repeat;">bbbbbb</td>
  </tr>
  <tr>
    <td>ccc</td>
  </tr>
</table>

关键设置说明： #

• yellow 保留单元格原有黄色底色
• linear-gradient(red, red) 创建纯红色背景块（用渐变是为了配合位置/尺寸参数，也可简化为red）
• top right 将红色块定位在单元格右上角
• 30px 15px 定义红色矩形的宽高，可按需调整
• no-repeat 避免红色块重复显示

如果要让红色块和单元格边缘留空隙，调整位置参数即可：

<td style="background: yellow, linear-gradient(red, red) top 5px right 5px / 30px 15px no-repeat;">bbbbbb</td>

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