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

Question

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

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

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

Answer 1

您可以使用伪元素和CSS三角形来完成此操作。

像这样：

<强> FIDDLE

标记

<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;
}