JSFiddle - React, Tailwind, and code Playground

by Andy Kuds

HTML

<div id="clickMe" style="margin-top:200px;border:10px solid silver;padding: 10px;-ms-transform:rotate(60deg);-moz-transform:rotate(60deg);-webkit-transform:rotate(60deg);-o-transform:rotate(60deg);position:relative;width:100px;height:50px;">click me!</div>

JavaScript

function coords(event, element) {
  function a(width) {
    var l = 0, r = 200;
    while (r - l > 0.0001) {
      var mid = (r + l) / 2;
      var a = document.createElement('div');
      a.style.cssText = 'position: absolute;left:0;top:0;background: red;z-index: 1000;';
      a.style[width ? 'width' : 'height'] = mid.toFixed(3) + '%';
      a.style[width ? 'height' : 'width'] = '100%';
      element.appendChild(a);
      var x = document.elementFromPoint(event.clientX, event.clientY);
      element.removeChild(a);
      if (x === a) {
        r = mid;
      } else {
        if (r === 200) {
          return null;
        }
        l = mid;
      }
    }
    return mid;
  }
  var l = a(1), 
      t = a(0);
  return l && t ? {
    left: l,
    top: t,
    toString: function () {
      return 'left: ' + l + '%, top: ' + t + '%';
    }
  } : null;
}

document.getElementById('clickMe').addEventListener('click', function (event) {
  alert(String(coords(event, event.target)));
}, false);