slanted background stripes

Slanted Background Stripes

Why Eat Your Coffee? page
Sample effect

While working on a recent project, I needed to use angled background stripes on a number of pages.

Here are a couple of requirements that limited my options:

  • Angled stripes with text content and a background color and/or image
  • Angled stripes stacked on top of each other

CSS transform: skewY()

My first idea was to try transform: skewY(4deg) on a wrapper element and transform: skewY(-4deg) on the internal element(s). Makes sense, right? Skew it and then unskew it? Two problems with this approach though:

  • Causes extra work for the rendering engine (and therefore performance hit)
  • Messes with layout: if you have multiple elements with the negative skew, the tops get offset the further down the row you go because the wrapper itself is skewed.

CSS pseudo-content with transform: skewY()

My next idea was to simply use :before and :after pseudo-content blocks and use transform: skewY(4deg) to angle them as required.

Pros

  • Cross-browser
  • Fairly easy to implement: specify an angle and you’re done

Cons

  • Only works with background images/colors
  • Can’t stretch <img…/> tags to cut them off at an angle

Sample Code

CSS clip-path: polygon() property

The next idea and the one I ended up using for most of the project was the clip-path: polygon() property along with vw units to keep the angle consistent at all browser widths.

Pros

  • Work with <img…/> tags and other content (lets you clip off parts of an image)
  • Much less code 😄

Cons

  • Doesn’t work in any version of IE
  • A bit more complicated to figure out since you have to ensure child elements have enough padding so they don’t end up getting clipped

Sample Code

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.