Div relative size recalculating on window resize

Question

Greeting, everyone.

I'd like to ask you to help me with the following. I've made this fiddle to illustrate my problem.

I'm trying to make div pattern with diagonals. May be I'm thinking in the wrong direction but this is the only solution I could imagine. Anyway, there two main problems with this.

1. In my solution I have 100s cloned units: the .square is the main unit, it has four cloned .background subunits and each of the latter contains appended .diagonal that is the rotated div. All the sizes depend on the size of the .square. And in its turn, the size of .square depends on $(window).width/20. I'm trying to create autoresizing pattern to have 20 units in the row on any window width. But in any solution it either crashes not depending on the amount of the .square's (even e < 1 leads to crash) or resizes nothing but the .square:nth-of-type(1).

2. As I've mentioned, there are 100s cloning processes. And the DOM increases with lightning speed. So is there any more elegant way to reach the same result I'm willing? Or Is there a way to clone without registering in the DOM?

Thanks in advance. Everything would help.