title: Can this stacked box effect be done using just CSS?
body: <p>I have seen other complex effects being done with just CSS like the stacked paper effect:</p>
  
  <p><a href="http://jsfiddle.net/thefrontender/LwW7g/" rel="nofollow noreferrer">http://jsfiddle.net/thefrontender/LwW7g/</a></p>
  
  <pre><code>&lt;div class="slide expandable-slide"&gt;Title&lt;/div&gt;
  &lt;div class="slide"&gt;Title&lt;/div&gt;
  
  .slide {
      float: left;
      display: block;
      position: relative;
      background: #FFF;
      height: 10em;
      width: 10em;
      padding: 1em;
      border: solid 2px #000;
      margin-right: 2em;
  }
  
  .expandable-slide {
      margin: 2em 2em 0 2em;
      box-shadow: -1em -1em #666,
                  -2em -2em #333;
  }
  </code></pre>
  
  <p>My need is very similar except the 2 outer edges need to connect with the main frontal div:</p>
  
  <p><img src="https://i.stack.imgur.com/lSU4y.png" alt="enter image description here"></p>
  
  <p>Anyone know of any tricks that can make this possible?</p>