title: CSS Skew only container, not content
body: <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/MhJp6.jpg" alt="enter image description here"></p>
  
  <p>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: </p>
  
  <p><a href="http://codepen.io/anon/pen/ubrFz" rel="noreferrer">http://codepen.io/anon/pen/ubrFz</a></p>
  
  <p>Please help! :)</p>