Tablo Hücresi iki renk arka planı çapraz olarak

Question

Aşağıdaki resimde görüldüğü gibi Tablo hücresi için birden fazla arka plan rengi olması mümkün mü?

Two color table cell background

ne istiyorum gibi bir şey görünüyor ama tam olarak çapraz değildir.

Answer 1

Hem mevcut köşeleri maç için 33deg gibi degrade açıları ayarlamak gerekir cevaplar iyi ve bu bir onları herhangi bir şekilde yere indirmeye çalışmayın. Bu, gradyanlarla duyarlı tasarım yapmak istiyorsanız kullanılabilecek bir iyileştirmedir.

td'un yüksekliği veya genişliği değiştiğinde, diğer iki yanıtta da (ve aşağıdaki kod parçasında görülen) belirtildiği gibi, degrade açıları değiştirilmelidir. Bu, tasarımın duyarlı olması gerektiğinde bir dezavantajdır, ancak açılı degradeler yerine to [side] [side] gradyan sözdizimini kullanırken önlenebilir. Bu sözdizimi, boyutlardaki herhangi bir değişikliğe uyum sağlayabilir.

td { 
    background: linear-gradient(to top right, #167891 49.5%, #0D507A 50.5%); 
    color: #fff; 
} 

İçindeki metnin, tam olarak sorunda olduğu gibi görünmesi için fazladan konumlandırmaya gereksinimi olacaktır.

tr:nth-child(3) td { 
 
    background: linear-gradient(to top right, #167891 49.5%, #0D507A 50.5%); 
 
    color: #fff; 
 
} 
 
tr:nth-child(1) td { 
 
    background: linear-gradient(18deg, #167891 50%, #0D507A 51%); 
 
    color: #fff; 
 
} 
 
tr:nth-child(2) td { 
 
    background: linear-gradient(33deg, #167891 50%, #0D507A 51%); 
 
    color: #fff; 
 
} 
 

 
/* Just for demo */ 
 

 
table { 
 
    float: left; 
 
} 
 
table:nth-child(2) td { 
 
    height: 50px; 
 
} 
 
table:nth-child(3) td { 
 
    height: 100px; 
 
} 
 
table:nth-child(4) td { 
 
    height: 150px; 
 
}

<!-- prefix library included only to avoid browser prefixes --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 

 
<table> 
 
    <tr><td>Two Color Background</td></tr> 
 
    <tr><td>Two Color Background</td></tr> 
 
    <tr><td>Two Color Background</td></tr> 
 
</table> 
 
<table> 
 
    <tr><td>Two Color Background</td></tr> 
 
    <tr><td>Two Color Background</td></tr> 
 
    <tr><td>Two Color Background</td></tr> 
 
</table> 
 
<table> 
 
    <tr><td>Two Color Background</td></tr> 
 
    <tr><td>Two Color Background</td></tr> 
 
    <tr><td>Two Color Background</td></tr> 
 
</table>

Answer 2

Doğrusal gradyan için bir dönüş derecesi eklemeniz gerekir. Bunun td öğesinin yüksekliğine bağlı olduğunu unutmayın. yüksekliğinin

td { 
 
    background: rgba(240, 105, 93, 1); 
 
    background: linear-gradient(18deg, #167891 50%, #0D507A 51%); 
 
    color: #fff; 
 
    height: 50px; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     Two Color Background 
 
    </td> 
 
    </tr> 
 
</table>

Bağımsız: o yüksekliğe bağımsızdır beri Harry'nin comment to top right dayanarak

daha iyi çalışacaktır.

td { 
 
    background: rgba(240, 105, 93, 1); 
 
    background: linear-gradient(to top right, #167891 50%, #0D507A 51%); 
 
    color: #fff; 
 
    height: 50px; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     Two Color Background 
 
    </td> 
 
    </tr> 
 
</table>

Answer 3

bu JSFiddle olduğu gibi, sadece benim örnekte

td { 
 
    height:100px; 
 
    background: -webkit-linear-gradient(33deg, lightblue 50%, navy 51%); 
 
    background: linear-gradient(33deg, lightblue 50%, navy 51%); 
 
    color:white; 
 
}

<table> 
 
    <tr> 
 
     <td>Two Color Background</td> 
 
    </tr> 
 
</table>