Highlight corner of table cell - html/css [duplicate]

Question

I have a table on my website and I want to highlight corners of some cells like in excel.

Is there any way how to do this in CSS?

I have already applied bootstrap style and data table extension on my table.

Answer 1

Use a 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>

Or a 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>

Answer 2

As @Era suggested, you can use :before to build that triangle inside the cell with only css. For positioning you will need to make that cell with position: relative;, this will make every absolute item inside it be relative to the element's position. Then with some borders you can easily build the red corner.

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>