simona6 Posted December 18, 2023 Share Posted December 18, 2023 .curved-bottom { clip-path: ellipse(100% 60% at 50% 40%); background-color: #000000!important; } I'm trying to add a background colour behind the Row that has this clip path base. So that it isn't just white. Then I'd like to make it black, and it blend in with the next row. Is there a simple fix to make it a colour, after the curve? Quote Link to comment Share on other sites More sharing options...
Olumide Posted December 18, 2023 Share Posted December 18, 2023 Try this .curved-bottom { position: absolute; bottom: 0; left: 0; width: 100%; height: 200px; /* Adjust the height of the curved bottom */ background-color: #000000; /* Set the background color */ clip-path: ellipse(100% 60% at 50% 40%); } Quote Link to comment Share on other sites More sharing options...
simona6 Posted December 19, 2023 Author Share Posted December 19, 2023 No that caused all sorts of problems. Sorry. Made the main Row that the Class was assgined to, almost disappear. Quote Link to comment Share on other sites More sharing options...
kicken Posted December 19, 2023 Share Posted December 19, 2023 It would help if you posted the associated HTML and any other css needed to create a demo of your issue. Creating a fiddle showing the issue would be great for example as it makes it a lot easier for others see the issue and to try possible solutions. Quote Link to comment Share on other sites More sharing options...
Barand Posted December 19, 2023 Share Posted December 19, 2023 Is this the effect you are looking for? <head> <style type='text/css'> .curved-bottom { clip-path: ellipse(100% 60% at 50% 40%); background-color: #FFFF00; color: black; } .w3-row { background-color: black; color: white; } .w3-col { padding: 50px 0; text-align: center; } </style> </head> <body> <div class='w3-row'> <div class='w3-col m12 curved-bottom'> I have a curvy bottom </div> </div> <div class='w3-row'> <div class='w3-col m12'> I'm a straight guy </div> </div> </body> 1 Quote Link to comment Share on other sites More sharing options...
simona6 Posted December 31, 2023 Author Share Posted December 31, 2023 https://www.79design.org.uk/contact-us-2/ This is a duplicate of the page. Inspect it and you see the grve-section has a white background, but I can't override that, as it will affect all sections down the page. I did try it with the additional 'curved-bottom' in the class in CSS, but that didn't work. Any help would be terrific. And some many problems! Quote Link to comment Share on other sites More sharing options...
kicken Posted December 31, 2023 Share Posted December 31, 2023 3 hours ago, simona6 said: Inspect it and you see the grve-section has a white background, but I can't override that, as it will affect all sections down the page. The white under the curve is coming from the background set by #grve-content rather than the .grve-section class, so changing it wouldn't help. Whatever background the section would have gets clipped away by the .curved-bottom class, so the background you are seeing has to come from some parent element. If you only need the change for this page, set a rule that is limited to just it: #page-35941 { background-color: #dadada; } If you need it for several pages, create a new class you can apply to the page wrapper div. Quote Link to comment Share on other sites More sharing options...
simona6 Posted January 1 Author Share Posted January 1 Mmmmm so what if you want the other rows to be black or plain white? You then have to set each row's background. I assumed you could set the background of the container as grey. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.