定位转换后的div（三角函数解法）

Question

我试图在javascript中使用一些三角函数来定位一些钻石div，但似乎我的逻辑在某处失败。

你可以看到我尝试了这个公式：pos + trig * dimension。我希望它会给我正确的坐标，以便我可以构建我的钻石网格。所以我的问题是，如何将钻石边界与三角学对齐？

var div = document.getElementsByTagName('div');

var x1 = div[0].offsetTop + Math.cos(45) * div[0].offsetHeight;
var y1 = div[0].offsetLeft + Math.sin(45) * div[0].offsetWidth;

div[1].style.top = y1 + 'px';
div[1].style.left = x1 + 'px';

整个jsfiddle可以在这里找到：https://jsfiddle.net/hmfxmvvs/

修改：我的预期结果为：https://jsfiddle.net/hmfxmvvs/5/

Answer 1

尝试从计算中删除.offsetHeight，.offsetWidth

var x1 = div[0].offsetTop + (Math.cos(45));
var y1 = div[0].offsetLeft + (Math.sin(45));
div[1].style.top = Math.round(y1) + 'px';
div[1].style.left = Math.round(x1) - 9 + 'px';

jsfiddle https://jsfiddle.net/hmfxmvvs/2/