Folded Corner CSS3

Might use for like on fazzle

by secretgspot

HTML

<div class="post">
            <span class="folded-corner"></span>
            this is an animated foldover demo
        </div>

        <div class="post photo">
            <span class="folded-corner"></span>
            <img src="http://cssdeck.com/uploads/media/items/3/3pOwHMr.jpg">
        </div>

CSS

body {
               width: 240px;
               margin: 0px auto;
               padding: 40px 0 0;
               background-color: #fff;
               font-family: Verdana, sans-serif;
               font-size: 11px;
            }

            a {color: #000;}

            .post {
               margin: 0px 0px 40px;
               padding: 15px;
               position: relative;
               background-color: #fff;
               -webkit-box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset;
            }
            .photo {padding: 0px!important;}
            .folded-corner {
               width: 0px;
               height: 0px;
               position: absolute;
               top: -1px;
               right: -1px;
               border-width: 0;
               border-style: solid;
               background: hsla(260,5%,60%,0.2);
               -webkit-box-shadow: 2px -2px 0px #fff, 0 1px 1px rgba(0,0,0,0.1), -1px 1px 1px rgba(0,0,0,0.1);
               -webkit-border-bottom-left-radius: 15px;
               border-radius: 0 0 0 15px;
               border-color: #fff #fff transparent transparent;
               -webkit-transition: border-width 0.2s ease-out;
            }
            .post:hover .folded-corner {border-width: 0 40px 40px 0;}
            .photo .folded-corner {background: hsla(260,5%,75%,0.5);}