I'm trying to develop a CSS effect where there is a fixed colored element in the top / left corner of a webpage. There are different "stages" / chunks of background (red, green, blue) with 1000px height. At each bridge between stages I would like for the color of the icon to transition. I mocked something up on jsfiddle. I literally want to see two halfes of the two fixed elements overlapping to make one, that would make me so happy.http://jsfiddle.net/reggi/vxBV3/Here's the CSS\[code\].stage{width:100%;height:1000px;position:relative;}.stage.one{background:red;z-index:1;}.stage.two{background:green;z-index:1;}.stage.three{background:blue;z-index:1;}.box{width:50px;height:50px;position:fixed;margin:10px;}.box.one{background
urple;z-index:1;}.box.two{background
range;z-index:1;}.box.three{background:yellow;z-index:1;}\[/code\]?And the HTML\[code\]<!--<div class="box one"></div><div class="box two"></div><div class="box three"></div>--><div class="stage one"> <div class="box one"></div></div><div class="stage two"> <div class="box two"></div></div><div class="stage three"> <div class="box three"></div></div>?\[/code\]I would like this to be CSS ONLY! I know that javascript would make this easier but I would like to push the limits of CSS if possible.
urple;z-index:1;}.box.two{backgroundrange;z-index:1;}.box.three{background:yellow;z-index:1;}\[/code\]?And the HTML\[code\]<!--<div class="box one"></div><div class="box two"></div><div class="box three"></div>--><div class="stage one"> <div class="box one"></div></div><div class="stage two"> <div class="box two"></div></div><div class="stage three"> <div class="box three"></div></div>?\[/code\]I would like this to be CSS ONLY! I know that javascript would make this easier but I would like to push the limits of CSS if possible.