Sombras esquinas levantadas
<div class="caja caja-sombra"><h2>Ejemplo 6</h2>
<p>Sombras esquinas levantadas</p>
<div class="sombra-abajo-derecha"></div>
<div class="sombra-abajo-izquierda"></div>
</div>
CSS
.caja{
width: 200px;
height: 150px;
background-color: #f4f4f4;
border-radius: 5px;
border: 1px dotted #9C9C9C;
}
.caja-sombra{
position: relative;
float: left;
padding: 1em;
margin: 100px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.caja-sombra:before, .caja-sombra:after{
content: "";
position: absolute;
z-index: -2;
}
.caja-sombra:before{
width: 24px;
height: 46%;
top: 0;
right: -10px;
display: inline-block;
box-shadow: 10px -10px 10px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(2deg) translate(-20px, 25px) skew(-6deg);
-moz-transform: rotate(2deg) translate(-20px, 25px) skew(-6deg);
-o-transform: rotate(2deg) translate(-20px, 25px) skew(-6deg);
transform: rotate(2deg) translate(-20px, 25px) skew(-6deg);
}
.caja-sombra:after{
display: inline-block;
height: 46%;
left: -10px;
top: 0;
width: 24px;
box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(2deg) translate(20px,25px) skew(6deg);
-moz-transform: rotate(2deg) translate(20px,25px) skew(6deg);
-o-transform: rotate(2deg) translate(20px,25px) skew(6deg);
transform: rotate(2deg) translate(20px,25px) skew(6deg);
}
.sombra-abajo-derecha{
content: '';
width: 24px;
height: 46%;
bottom: 0;
right: -10px;
position: absolute;
z-index: -1;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(-2deg) translate(-20px,-25px) skew(6deg);
-moz-transform: rotate(-2deg) translate(-20px,-25px) skew(6deg);
-o-transform: rotate(-2deg) translate(-20px,-25px) skew(6deg);
transform: rotate(-2deg) translate(-20px,-25px) skew(6deg);
}
.sombra-abajo-izquierda{
content: '';
width: 24px;
height: 46%;
bottom: 0;
left: -10px;
position: absolute;
z-index: -1;
box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(-2deg) translate(20px,-25px) skew(-6deg);
-moz-transform: rotate(-2deg) translate(20px,-25px) skew(-6deg);
-o-transform: rotate(-2deg) translate(20px,-25px) skew(-6deg);
transform: rotate(-2deg) translate(20px,-25px) skew(-6deg);
}