CSS3 - Lifted Corners - Left and Right - WORKING

CSS3 - Lifted Corners - Left and Right - WORKING

HTML

<div class="container">  
  <div class="top"> </div><!-- Pseudo-elements for the Left and Right on the top -->
  
  <div class="drop-shadow">
    Content here.
  </div>
  
  <div class="bottom"> </div><!-- Pseudo-elements for the Left and Right on the bottom -->
</div>

CSS

.container {
  /** Container element for the divs **/
  position:relative; 
  width:50%; 
  margin: 2em 2em;
}

.drop-shadow {
  /** Create content container.  Box-shadow here is to color the inside of the container **/
   width:100%;
   background: none repeat scroll 0 0 #FFFFFF;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
   padding:3em;
   text-align:center
}

.top:before,
.top:after {
  /** Generate pseudo-elements ('before' and 'after') and push them behind the container box. Position pseudo-elements ('before', and 'after') and give them dimensions **/
   content:"";
   position:absolute;
   z-index:-1;
   top:5px;
   left:0;
   width:10%;
   height: 1em;
   max-width:150px;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:10px 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(70deg);
   -moz-transform:rotate(70deg);
   -o-transform:rotate(70deg);
   transform:rotate(70deg);
}

.top:after{
  /**One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction. This is easily done by overriding only the properties that need to differ **/
   right:-95px;
   left:auto;
   top:20px;
   -webkit-transform:rotate(-70deg);
   -moz-transform:rotate(-70deg);
   -o-transform:rotate(-70deg);
   transform:rotate(-70deg);
 }

.bottom:before,
.bottom:after {
  /** Generate pseudo-elements ('before' and 'after') and push them behind the container box. Position pseudo-elements ('before', and 'after') and give them dimensions **/
   content:"";
   position:absolute;
   z-index:-2;
   top:90px;
   left:0;
   width:10%;
   height:1em;
   max-width:150px;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(107deg);
   -moz-transform:rotate(107deg);
   -o-transform:rotate(107deg);
  ...