The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Skew only container, not content

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #42377

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


    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:


    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.


    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)
  • The forum ‘CSS’ is closed to new topics and replies.