CSS3 'Curl Effect' - Gradients/Box Shadows/Transparency/Transform

Based on a tutorial I stumbled across that wasn't working in IE 10. I'm using some CSS3 to achieve a 'curl' effect that works in IE 10 also.

by rikkotec

HTML

<div id="container">

    <div id="pastel">

    </div>

</div>

CSS

body{ background: #ddd; }

#container{ width:400px; height:305px; margin:50px auto; position:relative; background-color:#000; border:5px solid #fff; }

#container:before{ -ms-transform: skew(0deg, 4deg); -webkit-transform; : skew(0deg, 4deg); box-shadow:5px 5px 5px #000; position:absolute; background-color:black; bottom:-5px; right:0; content:''; z-index:-6; width:220px; height:175px; right:5px; }

#container:after{ -ms-transform: skew(0deg, -4deg); -webkit-transform: skew(0deg, -4deg); box-shadow:-5px 5px 5px #000; position:absolute; bottom:-5px; content:''; z-index:-5; width:220px; height:175px; background-color:black; left:5px; }

#pastel{ background-image: -ms-linear-gradient( 90deg, rgba(221, 221, 221, 1) 50%, rgba(221,221, 221, .3) 85%, rgba(221, 221, 221, 1) 100%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(221,221,221,1)), color-stop(50%,rgba(221,221,221,0.01)), color-stop(100%,rgba(221,221,221,1))); width:420px; height:30px; z-index:-1; position:absolute; bottom:-35px; left:-10px; z-index:1 }

#pastel:before{ background-image: -ms-linear-gradient( 45deg, rgba(221, 221, 221, .4) 5%, rgba(0, 0, 0, 1) 15%); background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,.1)), color-stop(85%,rgba(255,255,255,0.01)), color-stop(100%,rgba(255,255,255,.35))); width:400px; height:305px; z-index:5; content:''; position:absolute; left:10px; top:-310px; }

#pastel:after{ background-image: -ms-linear-gradient( 135deg, rgba(221, 221, 221, .4) 5%, transparent 15%); background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(255,255,255,.35)), color-stop(15%,rgba(255,255,255,0.01)), color-stop(100%,rgba(255,255,255,.05))); width:400px; height:305px; z-index:5; content:''; position:absolute; left:10px; top:-310px; }