How can I cut the background-color like this?

[ricardoaguilarm]

I’m trying to archive this perfect cut:

But using :

    border-radius: 0px 0px 300px 300px;

I get this:

I been also experiment with % but still don’t get it. There is any alternative to archive this?

[iHassan-NG]

Try this and see
border-radius: 0px 0px 50% 50%;

[ricardoaguilarm]

Nop, pretty ugly. I Need that perfect shape in the borders.

[iHassan-NG]

check
border-radius: 0px 0px 30px 30px;

Or continue tweaking the bottom right and left till you are ok

[ricardoaguilarm]

I doesn’t work. I been playing with that for a while. It seems to be quite confusing to achieve a perfect cut like the one I want.

[bbsmooth]

I’m no expert on this exact subject but it seems to me if you want to use a border radius to do this then the element you apply it to needs to be a lot bigger than the element it is contained in (try to picture the size of the circle that cut is taken from). So you could create a bigger element to apply the border radius to and then move it into place with absolute positioning. Another option might be to use a canvas to draw the curve (perhaps using the arc method). Or of course you could just use a background image.

These are just a few ideas that came to mind, I’m sure there are other solutions. I may not be seeing the best solution for you since I can’t see how this is actually being used.