I am attempting to achieve a page curl effect similar to this one:
https://i.stack.imgur.com/grS7p.png
I have followed the example provided here: http://codepen.io/anon/pen/fpjoa
When I create new PHP and CSS files and copy-paste the code from the aforementioned link, the results are correct and displayed as expected. However, when I use this code for my Wordpress website, it does not work properly in Internet Explorer. Please see the image below for reference:
https://i.stack.imgur.com/jb9g0.png
It can be observed that the top right corner is distorted. Do you have any insights into why this might be happening? Should I make changes specifically for IE? And if so, why does the sample from the link provided work perfectly with Internet Explorer?
I am applying CSS to the page-wrap -> content-wrapper class as shown below:
.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);
}
Important: The theme being used is Sydney.