Skew only container, not content

[briteweb]

I’m having trouble figuring out how to make the following layout work. I’m not restricted to pure CSS – I know JS will be involved to make it cross-browser – but a CSS solution would be awesome. Here’s what I am trying to achieve:


I’ve tried the following code, skewing the container and then skewing the image in the opposite direction, but it just gives me a square image. Chrome inspector shows me that the container is being skewed properly, but skewing the image back makes it square again. Adding an overflow:hidden to the container kind of works but the edges of the angle become jagged. Here’s what I have tried:

[http://codepen.io/anon/pen/ubrFz](http://codepen.io/anon/pen/ubrFz)

Please help! :)

[TheDoc]

Unfortunately, the jagged lines are simply part of the business at the moment. There are a few hacks to get around it. Here is my example of what you’re trying to accomplish, sans hacks: http://codepen.io/ggilmore/pen/swFGf

[noahgelman]

I’ve done this before a long while back. What I did was Skew the container, than Skew the image inside back the other way. You have to do a little more work after that to get everything aligned but you’ll figure it out easily enough.

[briteweb]

Got this answered over on stackoverflow. TheDoc, you were close… just missing -webkit-backface-visibility tag, which I’d never heard of. Here’s the solution:

[http://codepen.io/anon/pen/wnlpt](http://codepen.io/anon/pen/wnlpt)

[Author]

Posts