表セルコーナー - HTML/CSS

Question

Iは、表のセルの隅部を強調する2つの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> 

Iは、表のセルのためにそれを使用、それは次のようになります。

しかし、それらの両方は、Iので、背景を設定し、それらの両方を同じセルに使用することはできません。同じセルの両方のコーナーをハイライトする方法はありますか？私はすでにこの問題を解決した

Answer 1

、私だけで作られた複合クラス

ここ

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

Answer 2

は、CSSの三角形を挿入するために擬似要素を使って、代替ソリューションです：

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>

OPの独自の解決策（バックグラウンド勾配を使用）よりも遥かに冗長ですが、これはいくつかの追加価値があるかもしれません。正確なシナリオに応じてpseudo elements could enable you to add pointer events to themを入力してください。