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](http://bdub.ca/skew_test.jpg)

    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! :)

    # 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: http://codepen.io/ggilmore/pen/swFGf

    # 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:

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

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".