body{ background:#eee; } .box { width:300px; height:300px; position: relative; -webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5); -moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5); box-shadow: 1px 2px 4px rgba(0,0,0,.5); padding: 10px; background: white; margin:40px; } .box:after { content: ''; -webkit-box-shadow: 100px 0 10px 20px rgba(0,0,0,.2); -moz-box-shadow: 100px 0 10px 20px rgba(0,0,0,.2); box-shadow: 100px 0 10px 20px rgba(0,0,0,.2); position: absolute; width: 50%; height: 40px; bottom: 20px; right: 90px; z-index: -1; -webkit-transform: skew(-40deg); -moz-transform: skew(-40deg); -ms-transform: skew(-40deg); transform: skew(-40deg); }
<div class="box"> 影とか付けてみたりな <a href="http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-getting-clever-with-css3-shadows/">ちなみにこの方法はtuts+さんで知りました。</a> </div>