How to create angled DIVs with CSS

One of the things I like about CSS is how it allows for adding some dimension to page layouts. Angled divs are often thought of as troublesome to implement but these examples will show you just how easy it can be.

There are many ways to add angles to HTML containers.

Some use transparent PNG images, arguably because they don’t know any other way. (Don’t ever use PNGs like this!)

Others use SVGs, which isn’t the best in my opinion but it’s definitely better than PNGs!

Some may use CSS polyfills, however this can be tricky and you may need to include a fallback solution for compatibility.

The quickest, most pain-free solution

My favourite method is by using some straight-up CSS.

I whipped up three examples here that you can copy for use in your own projects.

Let’s begin with a div that has an angle on the bottom-right:

We can add just a tad more CSS to apply the same effect to the top and bottom of the element:

Setting the angles in the reverse direction take just a wee tweak:

CSS so rocks.

Have fun!

Archived under:
This site uses cookies to collect basic info to help improve your experience. Read my Privacy Policy Accept