Change the menu color at one point of one page site

Question

I am making a one page portfolio. The content of the site will be horizontal scrollable, only the menu is fixed. The first 2 pages are black and last one is white. But the 3rd page is half black and half white, it's kind a seperator of the two backgrounds.

This is so far the best solution for my question: http://jsfiddle.net/a5a7x/1/ I only have problems to make it horizotnal not vertical.

This is the page content where i want to put the split: http://jsfiddle.net/n3FGr/

Remember, i only need to split the menu, because it will be fixed, so only the menu will have the split, when the content wil slide left and right.

Answer 1

Quick&Dirty rather close solution

I have explored the way to achieve your goal and have the some experiments:

• Text in middle-center
• Text in left-top angle
• Menu in left-top angle
  

I have not full solution, but the result is pretty good: (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; } 

Method of work:

Sync percents in each gradients:

52%:
62%:

Pros:

• Plain html&css;

Cons:

• Only webkit support;

The Canvas-way

Pros:

• Cross-browser (mobile too)

Cons:

• Javascript needed

The SVG-way

Pros:

• Cross-browser
• Javascript free (in static)
• More semantical then Canvas