A thin, transparent line appears between the triangular div and its parent div. I believe this is likely caused by anti-aliasing in the browser. If there is a way to fix this, I would appreciate it. I have also tried using SVG instead of clip-path, but the issue persists.

<div className="bg-red-500 h-[30rem] relative">
       <div className="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 className="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 className="w-1/2 h-10 md:h-20 bg-white absolute bottom-0 [clip-path:polygon(0%0%,100%100%,0%100%)]"></div>
        <div className="w-1/2 h-10 md:h-20 bg-white absolute bottom-0 right-0 [clip-path:polygon(100%0%,100%100%,0%100%)]"></div>
</div>