在窗口调整大小时重新计算Div相对大小

Question

问候，大家。

我想请你帮我解决以下问题。 我已经做了fiddle来说明我的问题。

我正在尝试用对角线制作div模式。可能是我在想错误的方向，但这是我能想象到的唯一解决方案。 无论如何，这有两个主要问题。

1. 在我的解决方案中，我有100个克隆单位：.square是主要单位 它有四个克隆的.background亚基和每个亚基 后者包含附加的.diagonal，它是旋转的div。所有 大小取决于.square的大小。反过来， .square的大小取决于$(window).width/20。我试着 创建自动调整模式，在任何行上有20个单位 窗口宽度。但是在任何解决方案中，它都会崩溃，而不是取决于.square的数量（甚至e < 1导致崩溃），或者只调整.square:nth-of-type(1)的大小。

2. 正如我所提到的，有100个克隆过程。和DOM 随闪电速度增加。那么还有更优雅的方式吗？ 达到同样的结果我愿意吗？或者有没有办法克隆 没有在DOM中注册？

提前致谢。一切都会有所帮助。