如何为细胞设置交叉半背景？如下url

Question

查看此图片网址我希望如下图所示 http://hall4u.com/images/first-half-booked.gif

Answer 1

根据我的假设，这可能是其中一个解决方案

HTML

<div class="container"></div>

CSS

.container{
    width:100px;
    height:100px;
    border:1px solid #111;
    position:relative;
}
.container:before {
    content:"";
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
    position:absolute;
    top:0;
    left:0;
}
.container:after {
    content:"";
    width: 0;
    border-bottom: 100px solid green;
    border-left: 100px solid transparent;
    position:absolute;
    top:0;
    left:0;
}

jsfiddle