表格单元格的突出角 - HTML/CSS

Question

我在我的网站上有一个表格，我想要像Excel一样突出显示某些单元格的角落。

有没有CSS的方法可以实现这个？

我已经在表格上应用了Bootstrap样式和数据表扩展。

- Stastny Jakub

---

你可以使用 :before 来显示三角形。 - Richa

Answer 1

使用线性渐变（linear-gradient）。

td {
  padding: 1em 3em;
  border: 1px solid grey;
  background-image: linear-gradient(225deg, red, red 10px, transparent 10px, transparent);
}

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

或者伪元素Pseudo-element

td {
  padding: 1em 3em;
  border: 1px solid grey;
  position: relative;
}

td::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-width: 7.5px;
  border-style: solid;
  border-color: red red transparent transparent;
}

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

- Paulie_D

Answer 2

正如@Era建议的那样，您可以使用:before仅使用css在单元格内构建该三角形。为了定位，您需要将该单元格设置为position: relative;，这将使其中的每个绝对项相对于元素位置而言。然后，通过一些边框，您可以轻松地构建红色角落。

table, tr, td{
 border: 1px solid black;
}
table{
 border-collapse: collapse;
 width: 300px;
}

td.corner{
 position: relative;
}
td.corner:before{
 content: '';
 position: absolute;
 top: 0;
 right: 0;
 border-left: 5px solid transparent;
 border-top: 5px solid red;
}

<table>
<tr>
 <td>a</td>
 <td>b</td>
</tr>
<tr>
 <td class="corner">c</td>
 <td>d</td>
</tr>
</table>

- artur99

---

是的，我没有心情打这么多字:D - Richa