Pure CSS folded-corner effect

HTML

<div class="note">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
</div>

<div class="note red rounded">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
</div>

<div class="note blue">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
</div>

<div class="note taupe">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
</div>

CSS

/* ------------------------------------------
PURE CSS FOLDED CORNER EFFECT
by Nicolas Gallagher
- http://nicolasgallagher.com/pure-css-folded-corner-effect/

http://nicolasgallagher.com
http://twitter.com/necolas

Created: 09 December 2010
Version: 1.2 (Updated 14 December 2010)

Dual licensed under MIT and GNU GPLv2 © Nicolas Gallagher 
------------------------------------------ */


/* ----------------------------------------------------------------------------------------------------------------------------
== GENERAL STYLES
** ---------------------------------------------------------------------------------------------------------------------------- */

html, body                             {padding:0; margin:0; font:1em/1.4 Cambria, Georgia, sans-serif; color:#333; background:#fff;}
header, hgroup                         {display:block;}

a:link, a:visited                      {border-bottom:1px solid #c55500; color:#c55500; text-decoration:none;}
a:visited                              {border-bottom:1px solid #730800; color:#730800;}
a:hover, a:focus, a:active             {border:0; color:#fff; background:#c55500;}
a:visited:hover,
 a:visited:focus,
 a:visited:active                      {color:#fff; background:#730800;}

.container                             {width:540px; padding:0 0 10px; margin:0 auto 30px;}
.header                                {border-bottom:1px solid #ddd;}
.footer                                {padding:10px 0 30px; border-top:1px solid #ddd; margin-bottom:0;}

h1                                     {margin:1em 0 0; font-size:2.5em; font-weight:normal; line-height:1.2; text-align:center;}
h2                                     {margin:0.5em 0 1.5em; font-size:1.25em; font-weight:normal; font-style:italic; text-align:center;}
p                                      {margin:1em 0; line-height:1.4em;}

pre                                    {margin:1.4em 0; font-size:12px; line-height:1.4em; white-space:pre-wrap;...