I am trying to position some diamond divs using some trigonometry in javascript but it seems my logic fails somewhere.

You can see that I tried this formula: pos + trig * dimension. I hoped it would give me the right coordinates so that I can construct my diamond grid. So my question is, how can I align the diamond borders with trigonometry?

`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'; `

The entire jsfiddle can be found here: https://jsfiddle.net/hmfxmvvs/