可以利用before和after伪类产生两个旋转一定角度的阴影来实现，比如：
<style>section {
POSITION:relative
margin:36px 50px
width:640px
height:200px
background-color:#fff
border:10px solid #ff0
}
section:before {
position:absolute
z-index:-1
left:20px
bottom:10px
width:80%
height:20px
content:""
transform:skew(-18deg) rotate(-3deg)
-webkit-transform:skew(-18deg) rotate(-3deg)
-moz-transform:skew(-18deg) rotate(-3deg)
box-shadow:0 20px 20px #666
}
section:after {
position:absolute
z-index:-2
right:20px
bottom:10px
width:80%
height:20px
content:""
transform:skew(18deg) rotate(3deg)
-webkit-transform:skew(18deg) rotate(3deg)
-moz-transform:skew(18deg) rotate(3deg)
box-shadow:0 20px 20px #666
}
</style>
<section></section>
html部分：
css部分：
html部分：
css部分：
js部分:
直接引用图片；
用到css3里边的旋转功能，用三个矩形，左边向右旋转30度，只显示右边框，中间矩形只显示下边框，不旋转。右边矩形向左旋转30度，只显示左边框。
建议直接引用图片；比较省时省事。
