Hello,
I am facing this issue and I need your help!
There is a banner containing a background image, I don’t want the bottom of the banner be straight line, I want it to be curved to the bottom over(on top) of the bottom div.
something like this image: photo but from the bottom.
Examples:
Example 1
I’m trying to show some of the banner’s image over the red div…get the point kind of?
I tried border radius options but its not what I’m looking for.
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.
Yes, like this:
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
Thanks for the picture
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.
Nice, so it’s mainly SVG paths and then CSS supports it a little
I really appreciate your help and time. Thank you Very Much!!
Here is an online service to vectorize a pixel image to svg you could use for this.
Make the image with a white area and a curved transparent area with a border edge and upload to:
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
