How can I get two parallelograms to overlap perfectly and resize dynamically in HTML?

I've just begun to get into HTML and CSS, and I'm wanting to create a design that involves parallelograms and resizes dynamically. I want four parallelograms, each starting from the top then going to 25%, 50%, 75%, and 100%, and overlapping. The result is what looks like a single parallelogram but with four sections (these will carry a-tags to link to other parts of the site).

Now this is all fine until you deal with the right margin and the skew. The top right of each parallelogram needs to sit in the same place and carry the same angle downwards for this trick to work. Unfortunately, because the right margin is the distance from the center of the parallelogram (not the top) to the right edge, this is hard - neither a fixed or relative distance for this measure works. The key issue is that the right margin would need to be a function of the vertical height of the screen - this would be possible with JQuery, but I'd like to try a pure HTML or CSS solution.

Code

Here's some basic code illustrating the issue:

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <style>
        html,
        body { 
                height:100%;
                width:100%; }
        div.parallelogram {
                position:absolute;
                top:0;
                right:0;
                -moz-transform:skew(-20deg);
                -o-transform:skew(-20deg);
                -webkit-transform: skew(-20deg); }
        div#parallelogram1 {
                height:100%;
                width:20%;
                background-color:#AAA;
                z-index:10; margin-right:100px; }
        div#parallelogram2 {
                height:50%;
                width:20%;
                background-color:#CCC;
                z-index:20;
                margin-right:55px; }
    </style>
</head>
<body>
<div class="parallelogram" id="parallelogram1"></div>
<div class="parallelogram" id="parallelogram2"></div>
</body>

If you can get the two parallelograms to stay lined up, and still fill the screen vertically regardless of the size (not as fussed about horizontal resizing, I'll get it to hang on the right side of the page - this is good enough for the effect I'm wanting), then you're a hero.

Personally I see three possibilities:

Some amazing way of getting this to work just with the correct margin-right, width, height and skew combo
Plonk each parallelogram inside some container, and tell it that it must stay wholly inside the container.
Jigsaw - make horizontal bars, then overlap with white parallelograms on each size to create the desired shape. I've managed to get this to work, but I'm keen to make a simpler solution - this technique is annoying if you actually want the parallelogram to sit infront of something.

Solution

EDIT:
Just nest the 3 parallelograms within one parent, that will make it much easier. This is a complete solution for the scenario you explained:

http://jsbin.com/omoreb/1/edit

Alternatively, if you don't want to position the nested parallelograms relatively, you can do it absolutely, but that will require you to specify the height of each one of them; and specify a margin-top for each anchor element in it. I think this solution does just fine.