Pure CSS fold corner animation cross-browser compatible

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>


Source: cross-browser

Leave a Reply