Creating paper curl using CSS3

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.