JSFiddle - React, Tailwind, and code Playground

by chiefGui

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;
}