How to get X and Y points in a Div?

I have prepared a more flexible solution for you based on the comments and without the need for any JavaScript.

HTML:

<div id="wrapper">
  <div id="elements">
    <div class="negate"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

CSS:

#elements {
  width: 420px;
  height: 220px;
  border: 2px solid black;
}

.element {
  width: 200px;
  height: 100px;
  margin: 5px;
  float: left;
  border: 2px solid black;
  box-sizing: border-box;
}

.negate {
  background: 
    linear-gradient(to top left,
      rgba(255, 0, 0, 0) 0%, 
      rgba(255, 0, 0, 0) calc(50% - 3px), 
      rgba(255, 0, 0, 1) 50%, 
      rgba(255, 0, 0, 0) calc(50% + 3px), 
      rgba(255, 0, 0, 0) 100%);
  width: inherit;
  height: inherit;
  position: absolute;
}

To play and test, I've prepared this jsFiddle . For a closer look at what you're about, see update 1 .