Pure CSS Folded Corner Effect With Animations
Folded Corners Effect with CSS3 Animations made by Charlotte Dann and inspired by this tutorial. I have improved the markup and CSS code a bit to make it more usable. We could use the
::after pseudo elements instead of the extra
span elements but unfortunately transitions on pseudo elements arn't widely supported. For example I tried pseudo elements in this item but the animation failed to work in Chrome 17, while worked fine in Firefox 11.
The folded corner is very simple to make. You could use an extra span element as used in this item or a pseudo element as mentioned above. Don't specify any width or height to whatever element you are using and specify some border to it to make it triangular. The element that needs to have the corner needs to be relatively positioned while the corner element needs to be absolutely positioned and then set appropriate
right offsets to it. Add some
transition for further awesomeness. Done!
No IE7 and below support, sorry.