CSS表格單元格背景圖像樣式（兩個三角形）

我有一個表格，我想根據動態值設置樣式單元格。我需要什麼來完成這樣的事情：CSS表格單元格背景圖像樣式（兩個三角形）

enter image description here

因此，有細胞分裂兩種顏色，其他純色，其他純色，但像在其上的圖案，和其他只邊境（紅）。

所以每個元素都是一個<td> HTML標籤

我想在創建圖像，然後將這些作爲背景，但我想知道如果有一個簡單的CSS辦法做到這一點。

有什麼建議嗎？

2014-07-04 VAAA

http://lea.verou.me/demos/css3-patterns.html來自此博客文章http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with- css3-gradients /似乎有一些你以後的模式。 – MLeFevre

嗨，在性能方面會更好：背景圖像還是純CSS？考慮到我將有一個31列和50行的表。非常感謝 – VAAA

這裏是你的答案：DivWithGradientColor

下面是表例如：Table cell withtwo-colors

HTML

<div> 
</div>

CSS

div{ 
     border:1px solid black; 
     background: linear-gradient(-45deg,blue 50%, red 50%); 
     height:100px; 
     width:100px; 
    }

來源

2014-07-04 15:47:43 Suresh

嗨，在性能方面會更好：背景圖像還是純CSS？考慮到我將有一個31列和50行的表。非常感謝 – VAAA

純粹的CSS會更好的爲一切！圖像會減慢你的網站！兄弟！毫無疑問！請投票！ – Suresh

謝謝兄弟！請投票[箭頭]作爲答案！如果您對此問題有任何疑問，請告訴我們！ – Suresh

當然。使用以下命令創建兩個帶CSS的三角形：before和：pseudo-selectors之後，然後將它們直接放置在td上。

TBH，雖然使用背景圖像可能更容易，更健壯。

來源

2014-07-04 15:46:42

CSS表格單元格背景圖像樣式（兩個三角形）

回答

相關問題