Hola!. Una de las soluciones seria utilizar la propiedad box-shadow y añadirle varias sombras. No he conseguido el efecto tal cual, tambien le da un poco de combra por arriba pero se parece:
div {
-moz-box-shadow:
30px 0 10px 0 #000,
-30px 0 10px 0 #000;
-webkit-box-shadow:
30px 0 10px 0 #000,
-30px 0 10px 0 #000;
}
Otra opcion es con imagenes a los lados del div de esta forma:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style>
#container{
border: 1px solid #000;
margin:auto;
width: 50%;
}
#principal {
float:left;
width: 70%;
}
#sombra-iz{
background-image: url('sombra-izquierda.jpg');
background-repeat: repeat-y;
float: left;
}
#sombra-de{
background-image: url('sombra-derecha.jpg');
background-repeat: repeat-y;
float:left;
}
#footer{
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div id="sombra-iz"> </div>
<div id="principal">
</div>
<div id="sombra-de"> </div>
<div id="footer"> </div>
</div>
</body>
</html>