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:
margin: 75px -20px;
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.