Question

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

.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，无论如何它都无法获得你想要的效果，更新的代码片段如下。

.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

您可以在curl-top-left:before：

中设置折角的颜色

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

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

Answer 3

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

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

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>

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

4 个答案: