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