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