我找到了一个very interesting way来做一个纯css动画折叠页面提示。它在Chrome中完美运行，但不适用于IE或Firefox。 我试图弄清楚兼容性问题的来源，但不幸的是我对CSS不是很有经验而我找不到它......
非常感谢任何关于如何解决它的线索或获得类似效果的替代方法！
这是CodePen
更新
我已经使用Bilal建议的代码上传了CodePen。现在它看起来更好但仍然做出一些奇怪的事情。如果我删除div＃fpc_corner-contents，可以看到折角，所以我认为问题来自一些重叠的组件......
<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>
答案 0 :(得分：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;
}