How can I cut the background-color like this?

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?

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

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

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

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

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.

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.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.