Four card feature section using CSS Grid and Flexbox

Hi Everyone!

First and foremost, english isn't my first language so please excuse me for any mispellings or grammatical errors.

I just completed a Frontend Mentor Project named Four card feature section(Frontend Mentor | Four card feature section coding challenge). The project is basically about reproducing and make responsive a set of four cards. What i found particular about this project is the fact that each card have a colored border top with a very particular angle. I mean, maybe this isn't THAT particular, i'm an aspiring developper so i don't have lot of experience. But i never saw border's angle like that before (the angle is basically 'inversed', instead of going inside the box it's going outside) so i had some trouble working on it. I tried a lot of options to reproduce the angles as seen in the mockup and the way i ended up doing it is using a div inside each of my cards, style its with border-top then 'cut' each border by setting the overflow property of each of my sections on hidden.

Here's my projet on GitHub: https://github.com/joanFaseDev/four-card-feature-app

And here's the live project: https://four-card-feature-app.vercel.app/

Honestly i'm not fond of my solution because i feel that it could be bad for accessibility. I mean, there's basically empty divs with no content and i have no idea how screen readers react to that. So i wanted to hear from more experiences developpers if there was an easy way to reproduce that kind of pattern (if possible, using pure css for i try to have a decent level at basics stuff before touching any framework)? I'm the kind of person who doesn't see the obvious so i felt i needed to ask around.

Thanks for you time. Don't hesitate to ask if you need more informations (i tried to explain clearly but maybe i failed) and again, sorry if i made grammatical errors. Happy coding to all!