html - 具有折叠 Angular 效果和动画的 CSS 按钮

Question

我使用下面的代码在折叠 Angular 按钮上创建效果，但我无法避免按钮左上角的白色背景。该类可以用来制作这个透明部分，从而显示黄色，这是主 DIV 的背景？

http://codepen.io/rsvaz83/pen/aORzBy

.back {
  background: #fc0;
}
.button {
  display: inline-block;
  padding: 1em;
  margin: 1em;
  background-color: #007E9F;
  text-decoration: none;
  color: white;
}
.curl-top-left {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-top-left:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  /* IE9 */
  background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
  /*For IE7-8-9*/
  z-index: 1000;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
.curl-top-left:hover:before,
.curl-top-left:focus:before,
.curl-top-left:active:before {
  width: 40px;
  height: 40px;
}

<div class="back">
  <a href="#" class="button curl-top-left">BUTTON EFFECT</a>
</div>

Answer 1

只需将下面一行中的第一个 white 更改为 #fc0(背景栏的颜色)即可。

background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
                                    ^^^^^

我还稍微简化了CSS，合并了transition规则，并删除了filter hack，无论如何在过时的IE上都无法获得你想要的效果，更新后的代码片段如下。

.back {
  background: #fc0;
}
.button {
  display: inline-block;
  padding: 1em;
  margin: 1em;
  background-color: #007E9F;
  text-decoration: none;
  color: white;
}
.curl-top-left {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-top-left:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  z-index: 1000;
  background: linear-gradient(135deg, #fc0 45%, #aaa 50%, #ccc 50%, #fff 80%);
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  transition: 0.3s;
}
.curl-top-left:hover:before,
.curl-top-left:focus:before,
.curl-top-left:active:before {
  width: 40px;
  height: 40px;
}

<div class="back">
  <a href="#" class="button curl-top-left">BUTTON EFFECT</a>
</div>