title: Lifted corner shadows extending to the side
body: <p>A website I'm working on needs to use a certain shadow effect for some panels.
  I have found the desired CSS shadow on the web but I have noticed it has some problems - when the target div is very tall, the shadow pops out behind it on its sides.</p>
  
  <p>I discovered the shadow is built from two, solid colour, rectangular objects that cast the shadow. They hide behind the div at an angle which creates that 'curly', sheet of paper-like shadow effect. This angle also makes them pop out when used with a very tall div block.</p>
  
  <p>I'm not very good with CSS so I don't know how to fix that. I've tried limiting the rectangles max-height property, but that makes them too short to leave any shadow below the div.
  Is there a way to make the boxes stick to the bottom of the div and never extend around its sides?</p>
  
  <p>This is the shadow I used:</p>
  
  <pre><code>.shadow {
  position: relative;
  }
  .shadow:before, .shadow:after {
      z-index: -1;
      position: absolute;
      content:"";
      bottom: 12px;
      left: 7px;
      width: 50%;
      top: 80%;
      max-width: 300px;
      background: #777;
      -webkit-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
      -moz-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
       box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
       -webkit-transform: rotate(-4deg);
       -moz-transform: rotate(-4deg);
       -o-transform: rotate(-4deg);
       -ms-transform: rotate(-4deg);
        transform: rotate(-4deg);
  }
  .shadow:after {
      -webkit-transform: rotate(4deg);
      -moz-transform: rotate(4deg);
      -o-transform: rotate(4deg);
      -ms-transform: rotate(4deg);
      transform: rotate(4deg);
      right: 7px;
      left: auto;
  }
  </code></pre>
  
  <p>You can see an example in this fiddle, the first div shows the shadow working properly, the second one shows the problem: <a href="http://jsfiddle.net/e6yh07pd/" rel="nofollow">jsfiddle</a> </p>