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

Alfred MX Toolbox SuperTool Custom Search

If you use Alfred on your Mac and use MXToolbox.com with any regularity, this custom search should save you time.

Add the custom search

Alfred MX Toolbox SuperTool screenshot

Use the keyword “mx” and any of the SuperTool commands listed here to search for the info you need.


Here is another custom search specifically for whois data.

Add the custom whois search

Alfred MX Toolbox Whois information

Here’s an icon you can use, since custom search URLs don’t include images:MXToolbox