Curved sections with a class

I’ve created a few different options for the shape of dark background sections (bubble top, bubble bottom, inverted top, inverted bottom, normal top, normal bottom) using a few different svg graphics I created… I’m trying to think of an efficient way to be able to change which style top or bottom is displayed by using a class rather than switching out the in the html.

I did try and use a clip path at first, but it didn’t function the same as the screen changed. The svg retains it’s shape as the screen size gets wider or narrower.

Any ideas?

here is a codepen

You should be able to make the SVG a background image in the CSS. Then you should be able to apply a class without having all that SVG code in the HTML.
Depending on how you want to use the graphic, you could consider applying it to ::before and ::after pseudo elements, to for example have “Bubble top” at the top of a container and “Bubble bottom” at the end of a container with a given class.

3 Likes