html - 对角线将两列合并为具有不同颜色背景的一列

Question

根据一些基本逻辑，我目前正在构建一个 HTML/CSS 表，该表以红色/黄色/绿色或灰色/白色显示每个单元格的值和颜色。

现在的问题是，一些列需要合并 - 包括它们的不同颜色被对角分割，即像这样：

虽然我可以轻松地为正常细胞着色，但我仍在为分裂细胞寻找优雅的解决方案。到目前为止，我唯一的想法是为每种颜色组合使用背景图片。但是，我想知道是否有更好的原生 CSS 解决方案？

Answer 1

您可以使用伪元素和 CSS 三角形来做到这一点。

像这样：

小提琴

标记

<div class="cell">
    <div class="top">50%</div>
    <div class="bottom">40%</div>
</div>

CSS

.cell
{
    width: 100px;
    height:40px;
    color: white;
    position: relative;
    line-height: 20px;
}
.bottom
{
    text-align: right;
}
.cell div:before
{
    content: '';
    display: inline-block;
    position: absolute;
    width: 0px;
    height: 0px;
    border-style: solid; 
    z-index: -1;
}
.top:before
{ 

    border-width: 40px 100px 0 0;
    border-color: green transparent transparent transparent;
}
.bottom:before
{
    border-width: 0 0 40px 100px;
    border-color: transparent transparent red transparent;
    top:1px;
    left:1px;
}