CSS3 Page curl

HTML

<ul class="box">
  <li></li>

</ul>

CSS

body {
    background-color: #aaa;
    padding: 30px;
}

ul.box {
    margin: 0;
    padding: 0;
    clear: both; 
}

ul.box li {
    list-style-type: none;
    margin: 0 30px 30px 0;
    padding: 0;
    width: 250px;
    height: 150px;
    border: 1px solid #efefef;
    position: relative;
    float: left;
    background: #ffffff; /* old browsers */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 11px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    
    /* more curly */
    border-top-left-radius: 0 0 120px 120px / 0 0 6px 6px;
}

ul.box li:after { 
    z-index: -1; 
    position: absolute; 
    background: transparent; 
    width: 70%; 
    height: 55%; 
    content: ''; 
    right: 10px; 
    bottom: 12px;
    -webkit-transform:  skew(15deg) rotate(6deg);
    -moz-transform:     skew(15deg) rotate(6deg);
    transform:          skew(15deg) rotate(6deg);
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow:    0 8px 16px rgba(0, 0, 0, 0.3);
    box-shadow:         0 8px 16px rgba(0, 0, 0, 0.3);
} 

ul.box li:before { 
    z-index: -2; 
    position: absolute; 
    background: transparent; 
    width: 70%; 
    height: 55%; 
    content: ''; 
    left: 10px;
    bottom: 12px;
    -webkit-transform:  skew(-15deg) rotate(-6deg); 
    -moz-transform:     skew(-15deg) rotate(-6deg); 
    transform:          skew(-15deg) rotate(-6deg);
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow:    0 8px 16px rgba(0, 0, 0, 0.3);
    box-shadow:         0 8px 16px rgba(0, 0, 0, 0.3);
}

JavaScript

/* 

A little more curly by adding a border-radius, but it also makes it a little blurry. ;-(

Original: http://matthamm.com/box-shadow-curl.html

*/