Quicktip: Use Negative Margins with CSS Transforms to Fix Clipping

Mar 2 2011

I’ve been playing around with CSS Transforms and had an annoying issue: when rotating divs at an angle, the edge of the div also rotated leaving a gap where I didn’t want one. See the pic:

In this case, the div is actually a header tag I wanted to span the length of the page, like a ribbon stretching the width of browser. But I did not want that gap. So what to do? I thought about using Transforms to skew the header the angle required to maintain a vertical line, but that’s annoying.

Instead, I simply added a negative margin to the width to stretch the header enough to hide the gap. Here’s the css and final result:

header 
{
  background-color: #191919;
  margin: 75px -20px;
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  tranform:rotate(-10deg);
}

You may find rotate and skew is a better combination to achieve the desired result- however, if you have text in your containing element, that text will also be skewed if you use skew.

To achieve the desired result within a page (where you don’t have the benefit of viewport clipping) you can always put the rotated element within another element, use negative margins, and set overflow:hidden to achieve the desired result.