[SOLVED] Can you apply 3d box shadow effects (lifted corners) on top and bottom of div?

Can you apply 3d box shadow effects (lifted corners) on top and bottom of div?

I am trying to create a lifted corner, 3d box effect on the bottom and top of a div. I am able to create the desired effect on bottom of the div, but cannot figure out how to mimic the effect on the top. Does anyone know how to achieve this on both the bottom and top of a div?

Here is a JSFiddle: https://jsfiddle.net/rnejan81/

body {
  background-color: #e2e2e2;
}
.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}
.effect2:after
{
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

<div class="box effect2 effect3">
    <h3>Effect 2</h3>
</div>

Solution

I just wrapped your box with another div and got the desired output

EDIT: Demo had some alignment issue before, thanks for @zaqx for pointing out that. this is the updated fiddle.

Here is the fiddle

body {
  background-color: #e2e2e2;
}
.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}

/*==================================================
 * Effect 2
 * ===============================================*/
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}
.effect2:after
{
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

.effect-wrapper {
  position: relative;   
}
 .effect-wrapper:before, .effect-wrapper:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 16%;
    width: 52%;
    top: 8%;
    height: 5px;
    max-width: 300px;
    background: #777;
    box-shadow: 0 15px 10px #777;
    transform: rotate(183deg);
}

.effect-wrapper:after {
    transform: rotate(177deg);
    right: 16%;
    left: auto;
}

<div class="effect-wrapper">
    <div class="box effect2 effect3">
        <h3>Effect 2</h3>
    </div>
</div>