具有折角效果和动画的 CSS 按钮

Question

我使用下面的代码在折叠角按钮上创建了一个效果，但我无法避免按钮左上角的白色背景。该类可以用来制作这个透明部分，从而显示黄色，即主 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 上也无法达到你想要的效果，更新后的代码 sn-p 如下。

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

Answer 2

将背景的第一个值改为黄色。

background: transparent linear-gradient(135deg, #Fc0 45%, #AAA 50%, #CCC 56%, #FFF 80%) repeat scroll 0% 0%;

Answer 3

您可以在curl-top-left:before中设置折角的颜色：

.curl-top-left:before {  
  [...]
  background: linear-gradient(135deg, HERE 45%,
                                      #aaaaaa 50%,
                                      #cccccc 56%,
                                      white 80%);
  [...]
}

只需将HERE 替换为您想要的颜色（例如#fc0）。此处不能使用透明度，因为折叠角绘制在按钮上方，所以当您将其设置为transparent 时，您将始终看到折叠角下方的按钮。

Answer 4

您可以将背景更改为渐变。 并与伪元素的效果同步移动。

.back {
  background: #fc0;
  padding-left: 30px;
  vertical-align: top;
  padding-top: 20px;
  padding-bottom: 20px;
}

.button {
  display: inline-block;
  padding: 1em;
  margin: 0em -2em;
  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);
  background-image: linear-gradient(135deg, transparent 30px, #007E9F 30px);
  background-position: -20px -20px;
  background-size: 200% 200%;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: background-position;
  transition-property: background-position;
}

.curl-top-left:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  /* IE9 */
  
  background: linear-gradient(135deg, transparent 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: inherit;
  transition-duration: inherit;
  -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;
}

.curl-top-left:hover,
.curl-top-left:focus,
.curl-top-left:active {
  background-position: 0px 0px;
}

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