Broke the whole head, I can not how to figure out how to form these blocks.

An example of how should look more here.

picture

The difficulty is that these blocks will be scaled depending on the size of the window, and accordingly the height and width of each block will vary. I tried to position each element by indents, indicated indents in percent, but when the window is enlarged / reduced, everything falls apart. I thought to make position: absolute and put positions on JS, but I figured it would be a lot of lines.

I will be glad to any ideas.

    2 answers 2

    But this will not work http://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_rotate ?

    • I do not see how it can help me. Turning a block is easy, but how can I position this block in a given grid, that’s what I can’t think of - frgs
    • although no, there was some idea. Now I will try - frgs

    Definitely need to be positioned using position:absolute , but I would set the size of the blocks via calc .