Encounter the issue exclusively on Chrome, and my suspicion is that subpixel rendering inconsistencies are the root cause.
The problem seems to arise only when the div's position is adjusted to a y-position with subpixels (like having a previous sibling with height:80vh and a screen height that cannot be evenly divided by 1.25). This explains why zooming in or out can make the issue appear or disappear.
For instance, in Chrome, the following snippet will exhibit thin spaces under specific screen sizes and zoom levels:
<script src="https://cdn.tailwindcss.com"></script>
<div class="h-[80vh] border-2 border-sky-500 m-2"></div>
<footer>
<div class="bg-red-500 h-[30rem] relative">
<div id="top-left" class="w-1/2 h-10 md:h-20 bg-inherit absolute transform -translate-y-full [clip-path:polygon(0%0%,100%100%,0%100%)]">
</div>
<div class="w-1/2 h-10 md:h-20 bg-inherit absolute transform -translate-y-full right-0 [clip-path:polygon(100%0%,100%100%,0%100%)]">
</div>
<div class="w-1/2 h-10 md:h-20 bg-white absolute bottom-0 [clip-path:polygon(0%0%,100%100%,0%100%)]"></div>
<div class="w-1/2 h-10 md:h-20 bg-white absolute bottom-0 right-0 [clip-path:polygon(100%0%,100%100%,0%100%)]" gt;
</div>
</div>
</footer>
If your issue does stem from subpixel rendering, you can resolve it by enforcing GPU rendering, such as utilizing will-change-transform as depicted below. (Additionally, applying a slight rotation enforces subpixel rendering, like setting --tw-rotate in this case.)
<script src="https://cdn.tailwindcss.com"></script>
<div class="h-[80vh] border-2 border-sky-500 m-2"></div>
<footer>
<div class="bg-red-500 h-[30rem] relative will-change-transform">
<div id="top-left" class="w-1/2 h-10 md:h-20 bg-inherit absolute transform -translate-y-full [clip-path:polygon(0%0%,100%100%,0%100%)]">
</div>
<div class="w-1/2 h-10 md:h-20 bg-inherit absolute transform -translate-y-full right-0 [clip-path:polygon(100%0%,100%100%,0%100%)]">&ht;
/div>
<div class = "w-1/2 h-10 md-h-20 bg-white absolute bottom-0 [clip-path:polygon(0%0%,100%100%,0%100%)]" >& lt;/div >
</div>;
<div class = "w-1/2 h-10 md-h-20 bg-white absolute bottom-0 right-0 [clip-path:polygon(100%0%,100%100%,0%100%)]" >& lt;]/div>
</div>{
</ footer >