CODEWITHSUNDEEP
htmlcsshtml-table
Stastny Jakub
Stastny Jakub

Reputation: 156

Table cell corners highlighting - html/css

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:

enter image description here

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?

Upvotes: 1

Views: 825

Answers (2)

domsson
domsson

Reputation: 4681

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.

Upvotes: 1

Stastny Jakub
Stastny Jakub

Reputation: 156

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

Upvotes: 4

Related Questions