How to detect that a rotated div is overlapping another div? [duplicate]

Question

Please see my updated fiddle demo.

I able to get value when two box/div overlapped but when i do rotate the DIV then it still returns TRUE even though its not overlapping with another div/box. Below the collission method which returns true when two DIV overlapped but did not detect when rotate the div.

 function collision($div1, $div2) {
  var x1 = $div1.offset().left;
  var y1 = $div1.offset().top;
  var h1 = $div1.outerHeight(true);
  var w1 = $div1.outerWidth(true);
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = $div2.offset().left;
  var y2 = $div2.offset().top;
  var h2 = $div2.outerHeight(true);
  var w2 = $div2.outerWidth(true);
  var b2 = y2 + h2;
  var r2 = x2 + w2;
    
  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
  return true;
}

Mercurialism

Please don't ignore the rules of SO - links to jsfiddle must be accompanied by code in the question itself. Marking the link as code to circumnavigate this rule is really annoying as it not only violates the rule but makes the link not clickable – Highmuckamuck

Frontend dev protips: Never tell a user to click somewhere else. Link the text. Then, never link "click here". – Transferase

The main problem is that the element box of a rotated element doesn't match its visual shape. See the linked duplicates. – Transferase

above mentioned 2 links dont have proper solutions.. – Mercurialism