jquery – 在一页网站的某一点更改菜单颜色

我正在制作一个页面组合。网站的内容将是可水平滚动的，只有菜单是固定的。前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免费(静态)>更多语义，然后画布