突出显示表格单元格的一角 - html / css

Question

我的网站上有一张桌子，我希望突出显示某些单元格的角落，例如excel。

有没有办法在CSS中如何做到这一点？

我已经在我的桌子上应用了bootstrap样式和数据表扩展。

Answer 1

使用linear-gradient

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或伪元素

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

正如@Era建议的那样，你可以使用：之前用css在单元格内构建三角形。 对于定位，您需要使用position: relative;创建该单元格，这将使其中的每个绝对项目都相对于元素的位置。然后使用一些边框，您可以轻松地构建红色角落。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;