Responsive Slanted Divs with CSS

The design for a website I worked on recently required slanted boxes, here’s a simplified version of the what the designer had in mind:

screenshot of design featuring slanted divs

Because the site was responsive, using background images wasn’t an option because retaining the slant angle at different widths would mean using lots of different images across breakpoints. This would be too much of a maintenance overhead, not to mention the fact that using a background image for a single colour block would be morally wrong.

The next approach that sprung to mind was using CSS triangles on before and after pseudo elements – a method I’ve used before on City’s course pages for slanted tabs. Unfortunately this method also failed the responsive test as you would need to know the width of the box to get a consistent angled line across the whole div.

My final approach was again to use pseudo elements, but this time applying a css 3 transform on them, skewing the whole element and hiding the overlapping areas. Here’s a pen with the code …

See the Pen Responsive slanted divs with CSS by Larry Naman (@LarryAnomie) on CodePen.

11 Responses so far.

  1. Ellen says:

    Stellar! Thanks for sharing this!

  2. Thimon says:

    It’s really cool, but does it work well on older IE browsers?

  3. Larry says:

    This will work back to IE 9. Depends on your use case, but falling back to plain ‘ol straight divs was sufficient for me. If slanty-ness is integral to a design you would probably have to use a background image as a fallback.

  4. Thimon says:

    Images in the div with the skewY are ugly…
    Do you also have this problem or am I the only one?
    Any solution?

  5. Thimon says:

    Only in IE btw…

  6. Gustopalis says:

    Hey there,

    I really appreciate your solution, and I’ve gotten it to work very well. Only issue I’m having is that the skewed edge looks like it has a lot of aliasing – kind of jagged – unless it’s a really light color as you have it.

    See an exmaple of what I have going.

    is there anyway to clean it up?

  7. Larry says:

    Hi there,

    One trick is to apply -webkit-backface-visibility: hidden; to the transformed element. I don’t know why this works, but it does noticeably smooth out the edges (on webkit browsers anyway).

  8. Mark says:

    I’m trying to use this approach to elements with transparency. Is there a way to prevent the layering of opacity using this method?

  9. Sandeep says:

    Supper,,, its really good

  10. fred says:

    Any chance you have something that will work when zooming? I’m looking for something that will maintain the integrity on Retina screens

  11. Robert H says:

    Thank you for sharing this! I’ve forgotten how to do this and it’s a pain to write the code. But I found this post and am grateful :)

Leave a Reply