For the last year and a half, I've done most of the front end development for DukeHealth.org. Much of the recent design has included angles in between sections to create a visual progression from top to bottom down the page. When I first looked at the comps, I knew there had to be a way to do this with CSS but wasn't sure what approach would be best. The site is also fully responsive so we needed a solution that would work on everything from phones to wide desktop monitors.

Here's a couple of examples of those angles from the original design comps.



As I played with the best way to create the angles, here's what I learned.

The simplest method out there is clip-path. This is a basic example:

It's incredibly simple. One line of CSS and we have our clipped angle!

  .container { clip-path: polygon(0 0, 100% 0, 100% 61%, 0% 100%); }

Unfortunately, we need to talk about browser support.

Browser support table

There is not full support for clip-path in Chrome and Safari. But for our purposes here with creating angles, it functions as expected. It’s just Internet Explorer and Edge who have no support.

If you’re okay with progressive enhancement and letting Microsoft users experience a site without angles, go forth and use clip-path. If consistency across all browsers is important…there is another option.

Transforms and Pseudo Elements

The best option is to use transforms and pseudo elements. Let's look at the first example from Duke Health.org again.

Look closely at the comp. We have two divs above the angle, one of them with text and one of them an image. Below the angle, we have a full width div with various content inside of it.

I've created a simplified version of this section where it's easy to see how the angle was created:

We have our two divs at the top which are pretty basic. The left div has some text content and the right div has an image.

The keys to note are that the bottom div now has a pseudo element inserted before the parent, it is positioned absolutely relative to the bottom div, and it uses transform: skewY to create the angle. While we could also use rotate, skewY is better because the sides of the angle are clipped relative to the container. If we used transform: rotate, they would extend beyond the edges.

There is one important limitation to the pseudo element method. We can only create angles with solid colors or CSS gradients. It wouldn't be possible to have two images clipped with an angle in between them. The only way to achieve that would be with clip-path or with a PNG image that includes the angle. As long as your design has a solid color on one side, go forth and create all the angles!

While I would have loved to use clip-path, we just aren't there yet with browser support. The pseudo element method was how I created all of the angles throughout Duke Medicine.org. Browser support is nearly 100% and we were able to achieve the exact look from the comps without any hacks or using a background image to create the angle.


Updated 02/18: New browser support since originally published in 2016.


807 0 1