.curved_box {
display: inline-
block;
*
display: inline;
width: 200px;
height: 248px;
margin: 20px;
background-
color: #fff;
border: 1px solid #eee;
-webkit-box-shadow:
0 1px 4px rgba(
0,
0,
0,
0.27),
0 0 60px rgba(
0,
0,
0,
0.06) inset;
-moz-box-shadow:
0 1px 4px rgba(
0,
0,
0,
0.27),
0 0 40px rgba(
0,
0,
0,
0.06) inset;
box-shadow:
0 1px 4px rgba(
0,
0,
0,
0.27),
0 0 40px rgba(
0,
0,
0,
0.06) inset;
position: relative;
*zoom:
1;
}
.curved_box:before {
-webkit-transform: skew(-15deg) rotate(-
6deg);
-moz-transform: skew(-15deg) rotate(-
6deg);
transform: skew(-15deg) rotate(-
6deg);
left: 15px;
}
.curved_box:after {
-webkit-
transform: skew(15deg) rotate(6deg);
-moz-
transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg);
right: 15px;
}
.curved_box:before, .curved_box:after {
width: 75%
;
height:50%
;
content: ' ';
-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);
position: absolute;
bottom: 10px;
z-index: -
1;
}
