Возможно ли иметь несколько цветов фона для ячейки таблицы, как на изображении ниже?Настольная ячейка двухцветного фона по диагонали
Two color table cell background, кажется, сделать что-то вроде того, что я хочу, но это не совсем по диагонали.
И существующий ответы хорошие, и это не т попытаться их отложить. Это улучшает их, что может быть использовано, если вы хотите иметь гибкий дизайн с градиентами.
Как уже упоминалось в двух других ответах (см. Снимок ниже), углы градиента должны быть изменены, если изменяется высота или ширина td. Это недостаток, когда тогда дизайн должен быть отзывчивым, но его можно избежать при использовании синтаксиса градиента 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>Вам необходимо добавить степень поворота к линейному градиенту. Обратите внимание, что это зависит от высоты элемента 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 будет работать лучше, так как она не зависит от высоты.
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>Вы также можете использовать 'для [стороны] [сторона]' синтаксис для поддержания диагональных окрасок независимо от размеров 'td' :) – Harry
Спасибо за предложение, Гарри , Ты лучший! :) –
Как в этом JSFiddle, вам просто нужно установить градиент углы, как 33deg, чтобы соответствовать углам в моем примере
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>
@ Хенри - просто потрясающе, на самом деле я должен был спрашивать то же самое, что я только что столкнулся с этой проблемой. Огромное спасибо ! –
@PaRiMaLRaJ: Добро пожаловать. Всегда рад помочь :) – Harry
маленький вопрос, почему '49% & 50%', почему не '50% и 51%'? –