纯CSS折角动画跨浏览器兼容

Question

我找到了一个 very interesting way 来做一个纯 css 动画折叠页面提示。它在 Chrome 中完美运行，但在 IE 或 Firefox 中却不行。 我试图找出兼容性问题来自哪里，但不幸的是我在 CSS 方面不是很有经验，我找不到它......

非常感谢任何有关如何解决它或获得类似效果的替代方法的线索！

这里是CodePen

更新：

我已经上传了带有 Bilal 建议的代码的 CodePen。现在它看起来好多了，但仍然会做出一些奇怪的事情。如果我删除 div #fpc_corner-contents 可能会看到折叠角，所以我认为问题来自一些重叠的组件......

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

我没有尝试，但它应该可以工作

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;
}