CSS wrong shadow effect (paper curl) on Internet Explorer - html

Question

I'm trying to achieve page curl like this:
I've followed this example: http://codepen.io/anon/pen/fpjoa
If I create new PHP and CSS files and copy - paste code from link above, results are correct, shown as expected. But If I'm using this code for my Wordpress website, It not working with Internet Explorer, look at picture below:
As you see above, right corner went wrong. Have you ideas why It happening? Maybe I should change something for IE? But why sample from link above working correctly with IE?
I'm using css on page-wrap -> content-wrapper class in following:
.page-wrap .content-wrapper {
position: relative;
background: white;/* #f0ab67;*/
border:1px solid lightgray;
padding: 50px;
margin: 0 auto 20px auto;
}
.page-wrap .content-wrapper:before,
.page-wrap .content-wrapper:after {
position: absolute;
width: 48%;
height: 10px;
content: ' ';
left: 20px;
bottom: 40px;
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transform: skew(-5deg) rotate(-3deg);
-moz-transform: skew(-5deg) rotate(-3deg);
-ms-transform: skew(-5deg) rotate(-3deg);
-o-transform: skew(-5deg) rotate(-3deg);
transform: skew(-5deg) rotate(-3deg);
-webkit-box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
-moz-box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
z-index: -1;
}
.page-wrap .content-wrapper:after {
left: auto;
right: 20px;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
-webkit-transform: skew(5deg) rotate(3deg);
-moz-transform: skew(5deg) rotate(3deg);
-ms-transform: skew(5deg) rotate(3deg);
-o-transform: skew(5deg) rotate(3deg);
transform: skew(5deg) rotate(3deg);
}
Note: I'm using Sydney theme.

Answer 1

How CBroe said, it is difficult without an example. But maybe this solution work for you:
.test {
position: relative;
margin: 0 auto;
width: 300px;
height: 150px;
border: 1px solid #ccc;
background: #fff;
}
.test:before {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 12px;
width: 45%;
height: 20px;
background: #777;
-webkit-box-shadow: 0 15px 19px #aaa;
-moz-box-shadow: 0 15px 19px #aaa;
box-shadow: 0 15px 19px #aaa;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.test:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
right: 12px;
width: 45%;
height: 20px;
background: #777;
-webkit-box-shadow: 0 15px 19px #aaa;
-moz-box-shadow: 0 15px 19px #aaa;
box-shadow: 0 15px 19px #aaa;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}
<div class="test">Test</div>