Ist es möglich, mehrere Hintergrundfarbe für eine Tabellenzelle wie im Bild unten zu haben? Tabelle Zelle zwei Farbe Hintergrund diagonal
Two color table cell background scheint, wie etwas zu tun, was ich will, aber es ist nicht genau diagonal.
Sowohl die bestehende Antworten sind gut und das ist kein t versuchen, sie in irgendeiner Weise niederzulegen. Dies ist eine Verbesserung, die verwendet werden kann, wenn Sie ein responsives Design mit Farbverläufen wünschen.
Wie bereits in den anderen zwei Antworten erwähnt (und im unten stehenden Ausschnitt zu sehen), sollten die Winkel des Gradienten geändert werden, wenn sich die Höhe oder Breite des td ändert. Dies ist ein Nachteil, wenn Design dann reaktionsfähig sein muss, aber es kann vermieden werden, wenn die Gradienten-Syntax to [side] [side] anstelle von gewinkelten Gradienten verwendet wird. Diese Syntax kann sich an jede Änderung der Dimensionen anpassen.
td {
background: linear-gradient(to top right, #167891 49.5%, #0D507A 50.5%);
color: #fff;
}
Der Text im Inneren müsste extra positioniert werden, damit er genau wie in der Frage erscheint.
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>Sie müssen einen Rotationsgrad zum linearen Gradienten hinzufügen. Beachten Sie, dass dies von der Höhe des Elements td abhängig ist.
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>Unabhängig von der Höhe:
Basierend auf Harrys Kommentar to top right wird besser funktionieren, da es unabhängig von der Höhe ist.
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>Sie könnten auch die Verwendung 'auf [Seite] [Seite]' Syntax, um die Diagonale Färbung unabhängig von den Abmessungen des 'td' :) – Harry
Danke für die Anregung zu halten, Harry . Du bist der beste! :) –
Wie in dieser JSFiddle, müssen Sie nur Steigungswinkel einstellen wie 33deg die Ecken in meinem Beispiel entsprechen
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>
@Henry - einfach genial, eigentlich sollte ich das gleiche fragen, da ich gerade auf dieses Problem gestoßen bin. Vielen herzlichen Dank ! –
@PaRiMaLRaJ: Gern geschehen, Kumpel. Immer froh, dass ich helfen kann :) – Harry
eine kleine Frage, warum '49% & 50%', warum nicht '50% & 51%'? –