我正在制作一个页面组合。网站的内容将是可水平滚动的，只有菜单是固定的。前2页是黑色，最后一页是白色。但第三页是半黑色和半白色，这是两个背景的分隔符。
这是迄今为止我的问题的最佳解决方案：http://jsfiddle.net/a5a7x/1/
我只有一个问题，使它不是垂直的水平。
这是我要分割的页面内容：http://jsfiddle.net/n3FGr/
解决方法
快速和肮脏而相当紧密的解决方案
我已经探索了实现目标的方法，并进行了一些实验：
> Text in middle-center
> Text in left-top angle
> Menu in left-top angle
我还没有完全解决，但结果相当不错：(demo on dabblet)
HTML：
<div>
<h1>Chess</h1>
</div>
CSS：
div {
background: linear-gradient(45deg,black 52%,white 52%);
}
ul {
background: linear-gradient(45deg,white 52%,black 52%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
工作方式：
每个梯度的同步百分比：
52％：
62％：
优点：
>普通html& css;
缺点：
>只有webkit支持;
帆布方式
优点：
>浏览器(手机)
缺点：
>需要Javascript
SVG路
优点：
>跨浏览器> Javascript免费(静态)>更多语义，然后画布
