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

Question

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

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

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

Answer 1

你可以用伪元素和 css 三 Angular 形来做到这一点。

像这样:

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