Table cell corners highlighting - html/css

Question

I have defined two CSS classes that highlights corners of table cells:

   .right
   {
       background-image: linear-gradient(225deg, green, green 5px, transparent 5px, transparent);
   }
   .left
   {
       background-image: linear-gradient(135deg, orange, orange 5px, transparent 5px, transparent);
   }

(example of usage)

<td /*some attributes*/ class="right">value</td>

When I use it for table cells, it looks like this:

But both of them sets background so I can't use both of them to the same cell. Is here any way how to highlight both corners of the same cell?

score 4 · Accepted Answer · answered Jul 17 '17 at 13:03

I have already solved this problem, I just made combined class

.note.approving
       {
           background-image: linear-gradient(225deg, green, green 5px, transparent 5px, transparent), linear-gradient(135deg, orange, orange 5px, transparent 5px, transparent);
       }

domsson · Answer 2 · 2017-07-17T13:40:21.853

1

Here is an alternative solution, using pseudo-elements to insert CSS triangles:

table {
  border-collapse: collapse;
}

td {
  position: relative;
  overflow: hidden;
  border: 1px solid #ccc;
  padding: 1.6em 1em;
}

td.left::before,
td.right::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

td.left::before {
  left: -5px;
  transform: rotate(90deg);
  border-bottom: 10px solid orange;
}

td.right::after {
  right: -5px;
  transform: rotate(-90deg);
  border-bottom: 10px solid green;
}

<table>
  <tr>
    <td class="left">1</td>
    <td class="left right">2</td>
    <td class="right">3</td>
  </tr>
</table>

While a lot more verbose than OP's own solution (using background gradients), this might have some additional value to some, seeing that the pseudo elements could enable you to add pointer events to them, depending on your exact scenario.

edited Jul 17 '17 at 13:40

answered Jul 17 '17 at 13:07

domsson

4,553
2
22
40

this works indeed, but that is very much CSS compare to a single gradient rule ;) 1line against 20 lines dispatch in 2 selectors – G-Cyrillus Jul 17 '17 at 13:09
1

Absolutely, I think the gradient version is indeed a much more elegant solution. Just wanted to provide this in addition to OP's solution, in case someone, one day, is looking to do the same but can't use `background` for whatever reason. Also, I kind of had to substantiate my comment. ;) – domsson Jul 17 '17 at 13:11
One benefit of this, by the way, is that you can do a bit more with it than with just background gradients. For example, [change the cursor to `pointer`, or possibly even put some JavaScript `onclick` on it](https://stackoverflow.com/questions/7478336/only-detect-click-event-on-pseudo-element#comment39751366_7478344). – domsson Jul 17 '17 at 13:17
not too sure about onclick and javascript since pseudos are not part of the dom, but playing with pointer-events you might get to something / effects – G-Cyrillus Jul 17 '17 at 13:20
1

This is the perfect solution for me because I'm already using background row colours. Thanks. – Marc Fearby Oct 18 '20 at 21:44

Table cell corners highlighting - html/css

2 Answers2