Pure CSS fold corner animation cross-browser compatible - css

Question

I've found a very interesting way to do a pure css animated folding page-tip. It works perfectly in Chrome but it does not in IE or Firefox.
I've tried to figure out where the compatibility problem come from but unfortunately I am not very experienced in CSS and I cannot find it...
Any clue about how to solve it or an alternative way to get a similar effect is highly appreciated!
here is the CodePen
UPDATE:
I've uploaded the CodePen with the code that Bilal suggested. Now it's looking better but still make some weird things. If I remove the div #fpc_corner-contents it's possible to see the folded corner so I think the problem come from some overlying components...
Updated CodePen
<div id="fpc_corner-box">
<a id="fpc_page-tip" href="#">
<!--
<div id="fpc_corner-contents">
<div id="fpc_corner-button"><strong>Click Here </strong>and description text lines</div>
</div>
-->
</a>
</div>

Answer 1

i did not try but it should work
h1 { color: #900; font-size: 16pt;/* trivial */ }
a.trivial {color: #C55;/* trivial */}
#fpc_effect-back {
background-color: #eeeef4; /* some background color to match corner inside's */
width: 100%;/* trivial */
font: 12pt arial,sans-serif,helvetica,verdana;/* trivial */
color: #666;//trivial
}
#fpc_effect-back * {
box-sizing: border-box;
}
#fpc_box {
width: 500px;/*any relative or absolute*/
position: relative;
background-color: #FFF;
}
#fpc_content {
padding: 20px;
}
#fpc_content:before {
content:"";
width: 80px;
height: 80px;
float: right;
}
#fpc_page-tip:before, #fpc_page-tip:after {
background-color: #FFF;
position: absolute;
display: block;
z-index: 2;
border-top-right-radius: 60%;
width: 50%;
height: 50%;
content: "";
}
#fpc_page-tip:before {
right: 100%;
top: 0%;
background: -webkit-radial-gradient(-180% 200%, circle, rgba(255,255,255,0) 85%, rgba(0,0,0,.1) 93%);
background: -moz-radial-gradient(-180% 200%, circle, rgba(255,255,255,0) 85%, rgba(0,0,0,.1) 93%);
background: -o-radial-gradient(-180% 200%, circle, rgba(255,255,255,0) 85%, rgba(0,0,0,.1) 93%);
}
#fpc_box:hover #fpc_page-tip:before {
border-right: solid 1px #fff;
}
#fpc_box div#fpc_corner-box:hover #fpc_page-tip:before {
border-right: solid 2px #fff;
}
#fpc_page-tip:after {
top: 100%;
right: 0%;
background: -webkit-radial-gradient(-250% 320%, circle, rgba(255,255,255,0) 85%, rgba(0,0,0,.10) 93%);
background: -moz-radial-gradient(-250% 320%, circle, rgba(255,255,255,0) 85%, rgba(0,0,0,.10) 93%);
background: -o-radial-gradient(-250% 320%, circle, rgba(255,255,255,0) 85%, rgba(0,0,0,.10) 93%);
}
#fpc_box:hover #fpc_page-tip:after {
border-top: solid 1px #fff;
}
#fpc_box div#fpc_corner-box:hover #fpc_page-tip:after {
border-top: solid 2px #fff;
}
#fpc_corner-box { /* edit these sizes for the default revealing corner size */
height: 20px;
width: 20px;
right: 0;
top: 0;
position: absolute;
overflow: visible;
}
#fpc_box:hover #fpc_corner-box { /* edit corner size (First animation, when the whole page is rollovered) */
height: 50px;
width: 50px;
}
#fpc_box div#fpc_corner-box:hover { /* edit corner size (Second animation, when the corner itself is rollovered) */
height: 100px;
width: 100px;
}
#fpc_corner-box:before {
position: absolute;
top: 0;
right: 0;
content: "";
display: block;
width: 133%;
height: 133%;
}
#fpc_corner-contents:after {
position: absolute;
top: 0;
right: 0;
content: "";
background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0) 37%, #DDD 62%, rgba(230, 230, 230, 0.1) 64%, rgba(255, 255, 255, 0) 67%), -webkit-radial-gradient(-50% 150%, circle, transparent 74%, rgba(0, 0, 0, 0.2) 74%, transparent 81%);
background: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0) 37%, #DDD 62%, rgba(230, 230, 230, 0.1) 64%, rgba(255, 255, 255, 0) 67%), -webkit-radial-gradient(-50% 150%, circle, transparent 74%, rgba(0, 0, 0, 0.2) 74%, transparent 81%);
background: -o-linear-gradient(45deg, rgba(255, 255, 255, 0) 37%, #DDD 62%, rgba(230, 230, 230, 0.1) 64%, rgba(255, 255, 255, 0) 67%), -webkit-radial-gradient(-50% 150%, circle, transparent 74%, rgba(0, 0, 0, 0.2) 74%, transparent 81%);
display: block;
width: 133%;
height: 133%;
}
#fpc_page-tip {
position: absolute;
top: 0;
right: 0;
content: "";
background: -webkit-linear-gradient(45deg, #ddd 17%, #dfdfdf 18%, #f5f5f5 30%, #f8f8f8 34%, #eee 39%, rgba(200,200,200,0) 41%);
background: -moz-linear-gradient(45deg, #ddd 17%, #dfdfdf 18%, #f5f5f5 30%, #f8f8f8 34%, #eee 39%, rgba(200,200,200,0) 41%);
background: -o-linear-gradient(45deg, #ddd 17%, #dfdfdf 18%, #f5f5f5 30%, #f8f8f8 34%, #eee 39%, rgba(200,200,200,0) 41%);
display: block;
width: 100%;
height: 100%;
}
#fpc_corner-button {
position: absolute;
width: 7em;
top: 0;
right: 0;
background-color: #900;
color: #fff;
font-family: Verdana, Geneva, sans-serif;
text-align: center;
padding: 8px 5px;
border-radius: 5px;
display: inline-block;
font-size: 11px;
}
#fpc_corner-contents {
width: 125%;
position: absolute;
display: block;
overflow: hidden;
-webkit-mask: -webkit-linear-gradient(45deg, transparent 49%, #000 53%);
-moz-mask: -moz-linear-gradient(45deg, transparent 49%, #000 53%);
-o-mask: -o-linear-gradient(45deg, transparent 49%, #000 53%);
top: 0;
right: 0;
height: 125%;
}
#fpc_corner-contents:before {
content: "";
position: absolute;
top: 0;
right: 0;
content: "";
display: block;
width: 100%;
height: 100%;
background-color: #eeeef4; /* Match this background color to #fpc_effect-back */
}
#fpc_corner-box, #fpc_corner-contents, #fpc_page-tip {
-webkit-transition-property: all;
-webkit-transition-duration: .3s;
-webkit-transition-timing-function: cubic-bezier(0, 0.35, .5, 1.7);
-moz-transition-property: all;
-moz-transition-duration: .3s;
-moz-transition-timing-function: cubic-bezier(0, 0.35, .5, 1.7);
-o-transition-property: all;
-o-transition-duration: .3s;
-o-transition-timing-function: cubic-bezier(0, 0.35, .5, 1.7);
}
#fpc_corner-button strong {
font-size: 13px;
font-weight: bold;
display: block;
}