CSS lifted corners on all 4 sides? - css

Question

I have come humbly to you big brains, as my little ol' brain just is not engaging on this one.
I have a need to do a lifted corner effect on all 4 sides of an image.
I've found 3 different methods to accomplish the lifted corners:
with box shadow and rotate
http://jsfiddle.net/zuul/mPnTP/
.drop-shadow {
position:relative;
float:left;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before,
.drop-shadow:after {
content:"";
position:absolute;
z-index:-2;
}
.drop-shadow p {
font-size:16px;
font-weight:bold;
}
/* Lifted corners */
.lifted {
-moz-border-radius:4px;
border-radius:4px;
}
.lifted:before,
.lifted:after {
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.lifted:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-ms-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
<div class="drop-shadow lifted">
<p>Lifted corners</p>
</div>
with linear gradient and rotate
http://cssdeck.com/labs/page-curl-box-shadow
with box shadow and skew
http://www.readitsideways.com/css3_demos/shadows/.
The skew example seems to deform more on zoom than the rotate. There is probably one method that is cleaner than the others?
All the examples show only two sides with the effect - and my diddling to try and add the other two sides appears to cancel out the original two. I have also been unsuccessful with applying the styling directly to the image, though that's probably a padding or margin issue.
My questions:
Can this be done on 4 sides?
Two divs, one div nested and stacked on top of another with the image in the inner div?
Or, can it be done with one div and an image?
I'd appreciate any help in sorting this out because I am totally adrift.
Thanks!
UPDATE 12/1
#Vals
Thanks for your contribution! So many different methods to get a similar result! I posted 3 methods above, then found a 4th that uses box shadow and linear gradient, no rotate or skew:
http://cjwainwright.co.uk/webdev/liftedcorners/
Yours uses box shadow and transform, and I'm calling it method #5. I note that this covers 2 sides, top and bottom, where I was seeking a 4 sided solution.
I received a 4 sided solution (#6) that uses box shadow and rotate with spans, thankyou to Danny Williams from the WW list:
http://codepen.io/dsongman/pen/PPMdpb?editors=110

Answer 1

I am not sure if this is a duplicate , there are lots of examples about this.
But I don't see any with all 4 corners, so here is my solution
.test {
width: 700px;
height: 300px;
margin: 50px;
position: relative;
background-color: lightgreen;
}
.test:before {
content: "";
position: absolute;
width: 30%;
height: 96%;
top: 2%;
left: 40px;
transform: perspective(500px) rotateY(10deg);
transform-origin: left center;
box-shadow: 0px 0px 30px 10px black;
z-index: -1;
}
.test:after {
content: "";
position: absolute;
width: 30%;
height: 96%;
top: 2%;
right: 40px;
transform: perspective(500px) rotateY(-10deg);
transform-origin: right center;
box-shadow: 0px 0px 30px 10px black;
z-index: -1;
}
<div class="test"></div>