主页 / coding / 问题 / 79436006
Accepted
chris01
Asked: 2025-02-13 19:33:55 +0800 CST

使用 CSS 和 rect() 在 td 单元格内部进行绘制

  • 772

<table style="border: 1px solid black;">
  <tr>
    <td style="width: 200px;">aaaaaa</td>
  </tr>
  <tr>
    <td style="background: yellow;">bbbbbb</td>
  </tr>
  <tr>
    <td>ccc</td>
  </tr>
</table>

我想要黄色单元格右上方有一个小红色矩形。

我想在我的 style-attribute 中放置一个 rect() 作为背景 - 但我不确定。

我的目标：

在此处输入图片描述

html

3 个回答

  1. 只需使用伪元素即可。

    td {
  position: relative;
}

tr:nth-child(2) td:after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  aspect-ratio: 1;
  background: red;
}
    <table style="border: 1px solid black;">
  <tr>
    <td style="width: 200px;">aaaaaa</td>
  </tr>
  <tr>
    <td style="background: yellow;">bbbbbb</td>
  </tr>
  <tr>
    <td>ccc</td>
  </tr>
</table>

    • 2
  2. Best Answer

    使用渐变

    <html>
<body>
<table style="border: 1px solid black;">
    <tr>
       <td style="width: 200px;">aaaaaa</td>
    </tr>
    <tr>
       <td style="background: conic-gradient(at right 5px top 5px, red 25%,yellow 0);">bbbbbb</td>
    </tr>
    <tr>
       <td>ccc</td>
    </tr>
</table>
</body>
</html>

    • 2

  3. 您需要添加一个类，比如说您想要那个矩形的active位置td。

    该类active将具有position: relative;，并且:after可用 来定位 的元素position: absolute;。

    td.active {
  position: relative;
  background: #FF0;
}

td.active:after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  height: 5px;
  aspect-ratio: 1;
  background: #F00;
}
    <table style="border: 1px solid black;">
  <tr>
    <td style="width: 200px;">aaaaaa</td>
  </tr>
  <tr>
    <td class="active">bbbbbb</td>
  </tr>
  <tr>
    <td>ccc</td>
  </tr>
</table>

    • 0

相关问题