Wrong CSS shadow effect (paper curl) in Internet Explorer

Question

I am trying to achieve a page freeze as follows:

I followed this example: http://codepen.io/anon/pen/fpjoa

If I create new PHP and CSS files and copy-paste the code from the link above, the results are correct, they are displayed as expected. But if I use this code for my Wordpress site, it doesn’t work with Internet Explorer, look at the picture below:

As you see above, the right corner did wrong. Do you have any idea why this is happening? Maybe I should change something for IE? But why does the example from the link above work correctly with IE?

I use css in the classroom page-wrap→ content-wrapperas follows:

.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 use the Sydney theme.

Answer 1

CBroe, . , , :

.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>

Hide result