Using CSS transforms to create a slanted layout

Web page layouts naturally tend toward stacks of rectangles, but we can easily create other shapes with CSS. In particular, using the skew property of a CSS transform, we can make a slanted layout.

CSS transforms can change the shape, position, or orientation of the elements to which they’re applied. The skew property lets us tilt an element by a given amount of degrees or radians along either the X- or Y-axis (or both). Below are a few example classes. Note that while CSS 2D transforms are well-supported, we do need to use prefixes.

.slanted {
  -webkit-transform: skewX(30deg); /* Ch < 36, Saf 5.1+, iOS < 9.2, An =< 4.4.4 */
      -ms-transform: skewX(30deg); /* IE 9 */
          transform: skewX(30deg); /* IE 10, Fx 16+, Op 12.1+ */
} 
.tilted { 
  -webkit-transform: skewY(1.6rad); 
      -ms-transform: skewY(1.6rad); 
          transform: skewY(1.6rad); 
} 
.cattywampus { 
  -webkit-transform: skew(15deg, 40deg); 
      -ms-transform: skew(15deg, 40deg); 
          transform: skew(15deg, 40deg); 
} 

Here’s an example of how to use the skew transform to create a slanted page layout:

See the Pen skewed by Sarah Paetsch (@spaetsch) on CodePen.0

The effect is created using three nested divs:

  • The outermost div has the .skew-outer class which sets its position to relative, allowing us to position children elements absolutely within it.
  • The middle div has .skew-set class, and the .skew-outer .skew-set::before selector creates a pseudo-element that is its first child. This pseudo-element is absolutely positioned in the upper-left of its relatively positioned parent. We can put the color and skew amount in separate .positive and .negative classes so that the common code in the .skew-outer .skew-set:before class is more reusable.
  • The innermost div has the skew-inner class and holds the content separately, so the text itself isn’t skewed. The dashed box shows the orientation of this div compared to the skewed div.

Example skew layout

Here’s an example page I’ve created to show the skew transform in context. You can view the page here and the code on github. Note that the page is responsive. Generating the background with the skew transform instead of using a full background with slanted stripes ensures that the images and edges are not distorted or changed on viewports of different sizes.

Leave a Reply