表格行元素下的 CSS 三角形

Question

我正在尝试在中心的第一个表格行下添加“CSS Triangle”，如下图所示：

如前面的示例所示，我尝试在第一行之后使用 ::after，但定位不正确。

这是没有三角形的表格

table {
    width: 100%;
}

td {
   border: 1px solid black;
}

td.content {
  height: 100px;
}

<table>
    <tr class="header">
        <td> # </td>
        <td> 1 </td>
        <td> 2 </td>
    </tr>
    <tr>
        <td colspan="3" class="content"> content </td>
    </tr>
</table>

Answer 1

您可能需要在 td 元素而不是行上执行 after。这是一种方法，如下所示。

https://css-tricks.com/snippets/css/css-triangle/

table {
    width: 100%;
}

td {
   border: 1px solid black;
}

td.content {
  height: 100px;
}

.red-triangle:after {
  content: '';
  position: absolute;
  top: 33px;
  left: calc(50% - 25px);
  width: 0px;
  height: 0;
  border-top: solid 25px red;
  border-left: solid 25px transparent;
  border-right: solid 25px transparent;
}

<table>
    <tr class="header">
        <td> # </td>
        <td class="red-triangle"> 1 </td>
        <td> 2 </td>
    </tr>
    <tr>
        <td colspan="3" class="content"> content </td>
    </tr>
</table>