HomeProjectsBlog

Create non-rectangular bottom to any div in three simple steps

2021-01-30
CSS

I came across Stripe's landing page recently and thought the header div on their website looked so cool! This is not the first time I've seen a non-rectangular header div, it seems to be quite a popular trend.

As I begin to consider redesigning my website, I wondered whether I'd be able to add something similar to my own website? I've never worked with SVG's before so I didn't know how complicated it would be. Turns out, it's actually really simple to do. In this article, I'll share a few simple steps to implement a non-rectangular bottom to any div.

Below is a screenshot of the finished product that we're going to build. I've created a CodePen with all of the code discussed above if you'd like to play around with it. Please feel free to steal it and use it on your own projects!

  1. Starting with a blank HTML document, create your div. You'll want to assign it a class name "container" and fill it with some content. In this case, I created a simple H1 and p tag filled with lorem ipsum. I set the margins of the body to 0 to remove CodePen's default margins to the left and right of the div, I also added a little padding to my h1 and p tags and set the background colour to blue.
  1. Now we want to generate our SVG shape. There's a fantastic free website we can use to help us with this called Get Waves. All you need to do is choose your shape and the website will generate your SVG automatically. If you're not happy with how it looks, you can play around with the settings until you find one you like. Once you have one you like, click the download button underneath the settings and click the 'Copy SVG code' button.
  1. Now that we've got our SVG shape, we want to add it to our own code. Paste the copied SVG code below the p tag within your div. You'll want to edit the viewBox attribute of the svg tag by reducing the last number by 1 from 320 to 319. This fixes an issue with Firefox where a small part of the div peeps out from under the svg at the very bottom, which we don't want. You'll also want to change the fill attribute of the path tag to the colour of the section below your div, in this case I've changed it to white (#fff). Finally, add display block to the CSS for your svg to make sure it always stretches the full with of the div on its own.

And there you have it! How easy was that?