CSS rounded triangle issue

I want to design something like this.

I have created it using following code:

box-sizing: border-box;  width: 20px;  height: 20px;  background: white;  border-top: solid 2px red;  border-left: solid 2px red;  border-top-left-radius: 8px;  border-right: solid 2px transparent;  border-bottom: solid 2px transparent;  transform: rotate(45deg);  

Here is the codepen of the code I have been playing with: https://codepen.io/ashesh-test/pen/WNGzKLO

But the problem now is, I have got some buttons inside the div and it looks like this when scrolling inside the div when change in the background color. I have tried with z-index for the contents and other ways but no luck:

So, how can I remove the bottom half of the triangle or is there any other neat way. Any help would be appreciated.

https://stackoverflow.com/questions/65556798/css-rounded-triangle-issue January 04, 2021 at 09:55AM