Responsive Result summary component using almost every CSS property

Building this project was quite enjoyable until I got stuck on a single CSS line, spending the entire night trying to decipher why it wasn't producing the desired effect. Here, I share what I found challenging, and I would greatly appreciate your feedback.

I implemented the top colored edges where the curve occurs using a div behind another div, and it works perfectly. However, the method I employed has a minor downside: as the page keeps zooming in, the whole border becomes colored until it is fully zoomed in/out.

Moreover, concerning semantic HTML, how would you recommend I approach it?