CSS三角形在表格中的元素下

Question

我正在尝试在表<td>元素下添加CSS三角形，以制作类似的东西 如何将三角形放在第二个tr上方并且不改变td高度，例如我的问题：

＆＃13;

＆＃13;

td {
  padding: 10px;
}
.arrow-down {
  position: relative;
  top: 25px;
  right: 0;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #000;
}

＆＃13;

<table border="1">
  <tr>
    <td>
      (1)
    </td>
    <td>
      (2)<br><br>
    </td>
    <td>
      (3)
      <div class="arrow-down">
      </div>
    </td>
    <td>
      (4)
    </td>
  </tr>
  <tr>
    <td colspan="4">
      bla bla
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用::after

中的伪元素td

td {
  padding: 10px;
  position:relative
}
tr:first-of-type td:nth-of-type(3)::after {
  content:"";
  position: absolute;
  bottom: -20px;
  right: 5px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #000;
}

<table border="1">
  <tr>
    <td>
      (1)
    </td>
    <td>
      (2)
      <br /><br />
    </td>
    <td>
      (3)
    </td>
    <td>
      (4)
    </td>
  </tr>
  <tr>
    <td colspan="4">
      bla bla
    </td>
  </tr>
</table>