Get a free trial // Grow your CSS skills // Land your dream job

Skew only container, not content

  • # January 30, 2013 at 5:40 pm

    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:

    ![Skew Test](

    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:


    Please help! :)

    # January 30, 2013 at 5:47 pm

    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:

    # January 30, 2013 at 6:21 pm

    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.

    # January 30, 2013 at 6:56 pm

    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:


Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed