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

Question

我已经定义了两个突出表格单元格角落的CSS类：

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

（使用示例）

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

当我将它用于表格单元格时，它看起来像这样：

但是他们都设置了背景，因此我不能将它们都用于同一个单元格。这里有什么方法可以突出显示同一个细胞的两个角落吗？

Answer 1

我已经解决了这个问题，我刚做了组合课

test1\suri

Answer 2

这是另一种解决方案，使用伪元素插入CSS三角形：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

虽然比OP自己的解决方案（使用背景渐变）更加冗长，但这可能对某些人有一些额外的价值，看到pseudo elements could enable you to add pointer events to them，具体取决于您的具体情况。