Ajax Loader
×

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 ::before or ::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 top and right offsets to it. Add some box-shadow, border-radius and transition for further awesomeness. Done!

No IE7 and below support, sorry.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Pure CSS Folded Corner Effect With Animations

    CSSDeck G+