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
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
My next idea was to simply use
:after pseudo-content blocks and use
transform: skewY(4deg) to angle them as required.
- Fairly easy to implement: specify an angle and you’re done
- Only works with background images/colors
- Can’t stretch
<img…/>tags to cut them off at an angle
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.
- Work with
<img…/>tags and other content (lets you clip off parts of an image)
- Much less code 😄
- 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