微信小程序——切角效果

CSS渐变是个非常强大的功能吗，我们可以用来实现各种效果，这边我们就用渐变来实现切角效果。首先实现一个角被切掉的效果，以右下角为例。这其中最大的窍门在于充分利用渐变的一大特性：渐变可以接受一个角度作为方向，而且色标的位置信息也可以是绝对的长度值，这一点丝毫不受容器尺寸的影响CSS渐变是个非常强大的功能吗，我们可以用来实现各种效果，这边我们就用渐变来实现切角效果。首先实现一个角被切掉的效果，以右下角为例。这其中最大的窍门在于充分利用渐变的一大特性：渐变可以接受一个角度作为方向，而且色标的位置信息也可以是绝对的长度值，这一点丝毫不受容器尺寸影响。

我们只需要一个线性渐变就可以达到目标，这个渐变需要把一个透明色标放在切角，然后再相反的位置设置另一个色标，并且把它的颜设置为我们想要的背景色。假设切角的深度为15px，CSS代码如下（这边普及下，切角深度为垂直于切角的直线距离）：

.testClass1 {
  width: 400rpx;
  height: 200rpx;
  background: #58a;
  background: linear-gradient(-45deg, transparent 15px, #58a 0);
}

接下来我们要实现两个切角效果，以底部为例。我们需要用到两层渐变。我们最初的想法可能是这样的：

.testClass1 {
  width: 400rpx;
  height: 200rpx;
  background: #58a;
  background: linear-gradient(-45deg, transparent 15px, #58a 0),
                linear-gradient(45deg, transparent 15px, #655 0);
}

但实际效果如上图所示，默认情况下这两层渐变都会填满整个元素，因此它们会互相覆盖。需要让他们缩小一些，于是我们使用background-size让每层渐变分别只占整元素一半的面积同时设置平铺模式background-repeat为只显示一次，这样就实现了我们想要的效果。

.testClass1 {
  width: 400rpx;
  height: 200rpx;
  background: #58a;
  background: linear-gradient(-45deg, transparent 15px, #58a 0) right,
                linear-gradient(45deg, transparent 15px, #655 0) left;
  background-size: 50% 100%;
  background-repeat: no-repeat;
}

四个切角效果的代码如下：

.testClass1 {
  width: 400rpx;
  height: 200rpx;
  background: #58a;
  background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
                linear-gradient(-135deg, transparent 15px, #58a 0) top right,
                linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
                linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

三角形效果如下：

.testClass1 {
  width: 400rpx;
  height: 200rpx;
  background: #58a;
  background: linear-gradient(135deg, transparent 141rpx, #58a 0) top left,
                linear-gradient(-135deg, transparent 141rpx, #58a 0) top right;
  background-size: 50% 100%;
  background-repeat: no-repeat;
}