如何在表格单元格的右下角添加一个小绿色三角形？

Question

如何在表格单元格的右下方添加一个绿色小三角？

我尝试使用此代码段：

<td style="background-image: linear-gradient(to left, red 4%,white 1%)"></td> 

但是，这并不像我想要的那样有效。 我需要它完全位于表格单元格的右下角！

Answer 1

以下是如何使绿色三角形仅出现在每一行的最后一列：

＆＃13;

＆＃13;

td {
  position: relative;
  padding-right: 10px;
  outline: 2px solid #ccc;
}

td:last-child:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  border: 5px solid transparent;
  border-bottom-color: #9ACD32;
  border-right-color: #9ACD32;
}

＆＃13;

<table>
  <tr>
    <td>Row 1, Col 1</td>
    <td>Row 1, Col 2</td>
    <td>Row 1, Col 3</td>
  </tr>
  <tr>
    <td>Row 2, Col 1</td>
    <td>Row 2, Col 2</td>
    <td>Row 2, Col 3</td>
  </tr>
  <tr>
    <td>Row 3, Col 1</td>
    <td>Row 3, Col 2</td>
    <td>Row 3, Col 3</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

（另见this Fiddle）

以下是如何使绿色三角形仅出现在第二行的最后一列：

＆＃13;

＆＃13;

td {
  position: relative;
  padding-right: 10px;
  outline: 2px solid #ccc;
}

tr:nth-child(2) td:last-child:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  border: 5px solid transparent;
  border-bottom-color: #9ACD32;
  border-right-color: #9ACD32;
}

＆＃13;

<table>
  <tr>
    <td>Row 1, Col 1</td>
    <td>Row 1, Col 2</td>
    <td>Row 1, Col 3</td>
  </tr>
  <tr>
    <td>Row 2, Col 1</td>
    <td>Row 2, Col 2</td>
    <td>Row 2, Col 3</td>
  </tr>
  <tr>
    <td>Row 3, Col 1</td>
    <td>Row 3, Col 2</td>
    <td>Row 3, Col 3</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

（另见this Fiddle）

Answer 2

我确实在:after position:absolute上放了一个CSS三角形（用边框制作）

td {
  position: relative;
  outline: 2px solid #ccc;
  font-size: 16px;
  padding-right: 10px;
  background-color: lavender;
}

td:after {
  content: "";
  width: 0px;
  height: 0px;
  right: 0;
  bottom: 0;
  position: absolute;
  border-top: 5px solid transparent;
  border-bottom: 5px solid yellowgreen;
  border-left: 5px solid transparent;
  border-right: 5px solid yellowgreen;
}

<table>
<tr>
<td>data content</td>
</tr>
</table>

codepen