How to construct an SVG overlay over a div to give each side a drop target?

I'm trying to create an overlay to place over an arbitrarily-sized div to provide it with four drop targets—each one corresponding to a side of the div's rectangle. The geometry of the drop targets should be such that a dropped element will go to the closest side of the div. This means a short, wide div will have trapezoidal top and bottom drop targets and triangular left and right drop targets, whereas a tall, narrow div will have triangular top and bottom drop targets and trapezoidal left and right drop targets (and a square div will have all triangles).

Here is the nested SVG I am trying to use for my overlay and the HTML it is overlaying along with its CSS:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    #overlaid {
      position: relative;
      width: 450px;
      height: 300px;
      border: 5px solid lightgray;
    }

    #overlay {
      --overlay-visibility: visible;

      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: 999999;
      visibility: var(--overlay-visibility, hidden);
    }

    svg {
      stroke: black;
    }

    path:hover {
      fill: yellow;
    }

<!-- language: lang-html -->

    <div id="overlaid">
      <svg id="overlay">

        <svg viewbox="0 0 100 50" preserveAspectRatio="xMidYMin">
          <path id="above-zone" d="M 0,0
                                   L 100,0 50,50
                                   z" fill="rgba(0,127,255,0.5)" />
        </svg>

        <svg viewbox="0 0 50 100" preserveAspectRatio="xMinYMid">
          <path id="before-zone" d="M 0,0
                                    L 50,50 0,100
                                    z" fill="rgba(255,0,127,0.5)" />
        </svg>

        <svg viewbox="0 0 50 100" preserveAspectRatio="xMaxYMid">
          <path id="after-zone" d="M 50,0
                                   L 50,100 0,50
                                   z" fill="rgba(0,255,127,0.5)" />
        </svg>

        <svg viewbox="0 0 100 50" preserveAspectRatio="xMidYMax">
          <path id="below-zone" d="M 0,50
                                   L 50,0 100,50
                                   z" fill="rgba(255,127,0,0.5)" />
        </svg>

      </svg>
    </div>

<!-- end snippet -->

I have two issues with this that I don't know how to solve. First, when the arbitrarily-sized div is not square (it could be any size—and could change), I don't know how to clip the triangles on the longer sides into trapezoids down the center of the div. This is what I get with the above code:


And that issue may be leading to the second issue, which is when the div is either very short or very tall with respect to its width, the nested SVGs on the longer sides begin to shrink (presumably because they bump into the other side of the outer SVG (instead of overflowing). This is what I get when I set the #overlaid height above to 200px in the above code:


So, how do I clip overlapping triangles into trapezoids so they don't overlap down the middle, and how do I get the triangles to overflow the outer SVG instead of shrink?

Other approaches are welcome, too, but remember, the overlaid rectangle size is arbitrary and the drop targets need to be able to receive drop events. I am also going to want to apply styling to these drop targets to indicate when they are active and to indicate when they are being hovered over, so please make sure your approach does not prevent that.

Here's what it should look like when it is shorter than it is wide (400x200 in this case).

Here's what it should look like when the outer div is stretched taller to make it square (400x400 in this case).

And finally, here's what it should look like when the outer div is stretched taller than it is wide (400x800 in this case).

It is not a problem if the shapes overlap, as pointer events will only be handled by the uppermost one. So all you have to care about is that shapes are stacked in such a way that for each side the intended triangular and trapezoid areas are on top of all others.

To counteract the overlap of the triangles at the left and right sides, they are swapped with the top and bottom rectangles if the aspect ratio of the div gets below 1. For this to work, you have to take advantage of the new container query feature. It is now implemented in all browsers, but be sure to check minimum versions.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const overlay = document.querySelector('#overlay');
const feedback = document.querySelector('#feedback')

overlay.addEventListener('mouseover', (event) => {
  const side = [...event.target.classList]
               .find(cl => cl.endsWith('zone'));
  if (side) {
    feedback.textContent = side;
  }
});

overlay.addEventListener('mouseleave', (event) => {
  feedback.textContent = '';
});

<!-- language: lang-css -->

#overlaid {
  position: relative;
  width: 450px;
  height: 100px;
  resize: both;
  overflow: hidden;
  border: 5px solid lightgray;
  container-type: size;
}

#overlay {
  --overlay-visibility: visible;

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  visibility: var(--overlay-visibility, hidden);
}

.wide {
  display: inline;
}

.high {
  display: none;
}

@container (max-aspect-ratio: 1/1) {
  .wide {
    display: none;
  }

  .high {
    display: inline;
  }
}

path, rect {
  stroke: black;
  vector-effect: non-scaling-stroke;
}

.above-zone {
  fill: rgba(0,127,255,0.5);
}
.below-zone {
  fill: rgba(255,127,0,0.5);
}
.before-zone {
  fill: rgba(255,0,127,0.5);
}
.after-zone {
  fill: rgba(0,255,127,0.5);
}

path:hover, rect:hover {
  fill: yellow;
}

<!-- language: lang-html -->

<div id="overlaid">
  <svg id="overlay">

    <rect class="wide above-zone" width="100%" height="50%" />

    <rect class="wide below-zone" y="50%" width="100%" height="50%" />

    <rect class="high before-zone" width="50%" height="100%" />

    <rect class="high after-zone" x="50%" width="50%" height="100%" />

    <svg class="wide" viewBox="0 0 50 100" preserveAspectRatio="xMinYMid">
      <path class="before-zone" d="M 0,0 L 50,50 0,100 z" />
    </svg>

    <svg class="wide" viewBox="0 0 50 100" preserveAspectRatio="xMaxYMid">
      <path class="after-zone" d="M 50,0 L 50,100 0,50 z" />
    </svg>

    <svg class="high" viewBox="0 0 100 50" preserveAspectRatio="xMidYMin">
      <path class="above-zone" d="M 0,0 L 50,50 100,0 z" />
    </svg>

    <svg class="high" viewBox="0 0 100 50" preserveAspectRatio="xMidYMax">
      <path class="below-zone" d="M 0,50 L 100,50 50,0 z" />
    </svg>

  </svg>
</div>

<p id="feedback">

<!-- end snippet -->