Do you have a mock up drawing of the exact design you want to emulate as it will determine which approach to take?
If all you want is part of an image to overlap then you can do that with some overlapping positioning technique or negative margins etc. However it does depend on what you are overlapping and where you want it to overlap and what other content is supposed to do when it has content on top of it?
Your example one could be achieved with a negative top margin on the div below the image and the setting the middle part of the image to have a higher z-index and overlap the white background. It does assume that the middle part of the image is on a transparent background of course.
There are of course a lot of other things to consider so it’s not worth me throwing out examples until we have the whole concept.
Thats how i want the banner to be. It’s a bad practice to just do this with the actual image, every time i want to change it I have to do the same setting. I want an option in CSS that does this curve and keep the banner background image as it is
It says a lot but unfortunately it’s what it does not say that will hold us back
The main problem is that you show a block of text sitting to the left of a curved banner and we can’t deduce from the image whether that block of text is manually controlled so that it does not overlap the red background or whether the text is meant to flow automatically around the red background.
Indeed making the text automatically flow around the red background is not possible for a cross browser solution. You would need to size the text block so that it fits only in the space where you want it which can be awkward in a responsive design and requires a full understanding of the whole dynamics of the page before a solution can be built.
Perhaps it would be better if I point you here first so you can read up on possible solutions and their pitfalls.