表細胞角突出 -

我已經定義了兩個CSS類，突出表格單元的角HTML/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>

當我將其用於表格單元，它看起來像這樣：

但他們兩人的設置背景，使我不能將它們都用於同一個單元格。這裏有什麼辦法來突出同一個單元的兩個角落？

來源

2017-07-17 Šťastný Jakub

我已經解決了這個問題，我只是做了組合的等級

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

來源

2017-07-17 13:03:45

是的，這是方式（多個背景） –

我可以標記我自己的答案爲接受在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自己的解決方案（使用背景漸變）更詳細，但這對一些人來說可能有一些額外的價值， t pseudo elements could enable you to add pointer events to them，這取決於你的確切場景。

來源

2017-07-17 13:07:22 domsson

這確實有效，但這是非常多的CSS比較單個漸變規則;）1行對20行調度2選擇器 –

當然，我認爲漸變版本確實是一個更優雅的解決方案。除了OP的解決方案之外，只是想提供這個，以防某個人有一天想要做同樣的事情，但不管用什麼原因都不能使用「背景」。另外，我必須證實我的評論。 ;） – domsson

順便說一下，這樣做的好處之一是可以做更多的事情，而不僅僅是背景漸變。例如，[將光標更改爲'pointer'，或者甚至可以在其上放一些JavaScript'onclick']（https://stackoverflow.com/questions/7478336/only-detect-click-event-on-pseudo-element ＃comment39751366_7478344）。 – domsson

表細胞角突出 -

回答

相關問題