Creating paper curl using CSS3 - html

Question

HTML code:
<div class="box">Paper Curl</div>
CSS3 code:
.box
{
position: relative;
width: 500px;
padding: 50px;
margin: 0 auto 20px auto;
background: #f0ab67;
}
.box:before, .box:after
{
position: absolute;
width: 40%;
height: 10px;
content: ' ';
left: 12px;
bottom: 12px;
background: transparent;
-webkit-transform: skew(-5deg) rotate(-5deg);
-moz-transform: skew(-5deg) rotate(-5deg);
-ms-transform: skew(-5deg) rotate(-5deg);
-o-transform: skew(-5deg) rotate(-5deg);
transform: skew(-5deg) rotate(-5deg);
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
z-index: -1;
}
.box:after
{
left: auto;
right: 12px;
-webkit-transform: skew(5deg) rotate(5deg);
-moz-transform: skew(5deg) rotate(5deg);
-ms-transform: skew(5deg) rotate(5deg);
-o-transform: skew(5deg) rotate(5deg);
transform: skew(5deg) rotate(5deg);
}
Below is the "paper curl" I wanted to achieve:
http://postimg.org/image/v0l84bmdv/
Below is the curve I could make so far:
http://codepen.io/anon/pen/BCLpE
Can anyone help me out on how to achieve the curves as perfect as in the image? I am not sure whether to go with image or we can do it with CSS3 itself.

Answer 1

Your demo shows that you had the right direction. You just need to tweak it a little by trial and error. Here is the edited code:
.box {
position: relative;
width: 500px;
padding: 50px;
margin: 0 auto 20px auto;
background: white;/* #f0ab67;*/
border:1px solid lightgray;
}
.box:before, .box:after {
position: absolute;
width: 48%;
height: 10px;
content: ' ';
left: 20px;
bottom: 40px;
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transform: skew(-5deg) rotate(-3deg);
-moz-transform: skew(-5deg) rotate(-3deg);
-ms-transform: skew(-5deg) rotate(-3deg);
-o-transform: skew(-5deg) rotate(-3deg);
transform: skew(-5deg) rotate(-3deg);
-webkit-box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
-moz-box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
z-index: -1;
}
.box:after {
left: auto;
right: 20px;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
-webkit-transform: skew(5deg) rotate(3deg);
-moz-transform: skew(5deg) rotate(3deg);
-ms-transform: skew(5deg) rotate(3deg);
-o-transform: skew(5deg) rotate(3deg);
transform: skew(5deg) rotate(3deg);
}
NOTE: I've tried using the white color instead of the color you used originally to make it look like the paper in the picture. And it may not be exactly what you want, if so just wait for another better answer :)
Demo.
Tip: You can try yourself changing the box-shadow, especially the blur and the color to make it exactly what you need. The blur I used in the demo is 6px, but looks like 4px is better.

Answer 2

when creating shadows, sometimes its best to use the elements background as shadow while setting its opacity to a very low number.
here is a FIDDLE
html:
<div class="paper"></div>
css:
body {
background:#ededef;
padding:0;
margin:0;
}
.paper {
position: relative;
margin:0 auto;
height:100px;
width:500px;
background:#ffffff;
border:1px solid #dcdcdc;
}
.paper:before {
position: absolute;
width: 45%;
height: 20px;
content:' ';
left: 10px;
bottom: -8px;
background:black;
opacity:0.2;
-webkit-box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.8);
-moz-box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.8);
box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.8);
-webkit-transform: skew(0deg,-5deg);
-moz-transform: skew(0deg,-5deg);
transform: skew(0deg,-5deg);
z-index: -1;
}
.paper:after {
position: absolute;
width: 45%;
height: 20px;
content:' ';
right: 10px;
bottom: -8px;
background:black;
opacity:0.2;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
-webkit-transform: skew(0deg,5deg);
-moz-transform: skew(0deg,5deg);
transform: skew(0deg,5deg);
z-index: -1;
}

Answer 3

I'll go with my tunning too :) DEMO From my earlier comment
/* prefix auto-generated in demo link */.box
{
position: relative;
width: 500px;
padding: 50px;
margin: 0 auto 20px auto;
background:white;
box-shadow:inset 0 0 0 1px lightgray;
}
.box:before, .box:after
{
position: absolute;
width: 50%;
height: 20px;
content: ' ';
left: 25px;
bottom: 30px;
transform:
skew(-7deg)
rotate(-3deg);
box-shadow:
0 30px 2px 7px rgba(0, 0, 0, 0.3);
z-index: -1;
}
.box:after
{
left: auto;
right: 25px;
transform:
skew(4deg)
rotate(3deg);
}
img {
max-width:100%;
}
body {
background:#E7EBEC;
}