テーブルセル斜めに2色の背景色

Question

下の画像のようにテーブルセルに複数の背景色を設定できますか？

Two color table cell background私が欲しいもののような何かをするようだが、それは正確に対角線ではありません。

Answer 1

私の例では角を一致させるために33degのような勾配の角度を設定する必要があります答えは良いですが、これはどのような方法でそれらを置くしようとしないでください。これは、グラデーションを使用したレスポンシブデザインが必要な場合に使用できる改良点です。

tdの高さまたは幅が変更された場合は、他の2つの回答（下のスニペットに記載）で既に述べたように、グラジエントの角度を変更する必要があります。これは、設計が応答性でなければならない場合には欠点ですが、傾斜したグラデーションの代わりにto [side] [side]グラデーション構文を使用すると回避できます。この構文は、ディメンションの変更にも対応できます。

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

テキストの中には、疑問のように表示されるように特別な配置が必要です。

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

回転勾配を直線勾配に追加する必要があります。これはtd要素の高さに依存することに注意してください。

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>

高さの独立した：それは高さとは独立しているので、ハリーさんのコメントto top rightに基づいて

は良い仕事します。このJSFiddleのように

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

、あなただけの既存の両方

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>