Lifted corner shadows extending to the side - css-transforms

Question

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.
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.
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?
This is the shadow I used:
.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;
}
You can see an example in this fiddle, the first div shows the shadow working properly, the second one shows the problem: jsfiddle

Answer 1

You can remove the top property on the pseudo elements and give a fixed height to them. You can also give a max-height value to pseudo elements to ensures they don't overflow the div when it is short :
DEMO
.box {
background-color: #3a6fa9;
display: block;
padding: 4px;
margin-bottom: 30px;
margin-left: 30px;
border: 1px solid #ddd;
border-radius: 4px;
width: 500px;
height: 300px;
}
.box-tall {
width: 500px;
height: 2000px;
}
.shadow {
position: relative;
}
.shadow:before, .shadow:after {
z-index: -1;
position: absolute;
content:"";
bottom: 12px;
height:100px;
max-height:10%;
left: 7px;
width: 50%;
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;
}

Answer 2

Instead of top: 80%;, you can just set a small height, such as height: 20px;:
.shadow:before, .shadow:after {
z-index: -1;
position: absolute;
content: "";
bottom: 12px;
left: 7px;
width: 50%;
height: 20px;
/* 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);
}

Answer 3

your fiddle updated: http://jsfiddle.net/e6yh07pd/3/
problem was the
top:80%;
value you have. can't understand why you used it... isteed remove it and just add a height fixed (px) for your after and before