linear-gradient 实现切角效果

一、前言

linear-gradient() ：函数用于创建一个表示两种或多种颜色线性渐变的图片。即实现线性渐变！

二、基础用法

默认渐变方向是从上到下渐变，这种情况不需要申明渐变方向！

/* 1. 从上到下， 从红色开始，转为黄色，再到蓝色*/
#grad {
  background-image: linear-gradient(red, yellow, blue);
}

/* 2. 从左到右，从红色开始，转为黄色 */
#grad {
  background-image: linear-gradient(to right, red , yellow);
}

/* 3. 从右上角到左下角的线性渐变 */
#grad {
  background-image: linear-gradient(to left top, blue, red);
  /* 
  	to left top : 从右下角到左上角的线性渐变；
  	to right top : 从左下角到右上角的线性渐变；
  	to left bottom : 从右上角到左下角的线性渐变；
  	to right bottom : 从左上角到右下角的线性渐变；
  */
}

/* 4. 指定一个角度（选择180deg）的线性渐变 */
#grad {
  background-image: linear-gradient(180deg, red, yellow);
}

/* 5. 使用透明度 */
#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

三、渐变实现缺角矩形

3.1 基础：从60％的梯度线开始的渐变

有时候我们不希望一开始就出现渐变，可以从中间某个地方开始最好。为了实现这个效果，可以在你希望渐变梯度开始的地方，加上一个同样色值的颜色中间点。

div {
  background: linear-gradient(135deg, red, red 60%, blue);
  /*
  	background: linear-gradient(135deg, red 60%, blue);  这样写一样
  */
}

3.2 不需要过渡颜色（不要过渡渐变）

div {
  // 偏移135deg；从5%开始渐变; 渐变到蓝色，但是不要过渡（blue 0 ：这里的0不能省，表示不要过渡）
  background: linear-gradient(135deg, red 5%, blue 0);
}

3.3 实现切角矩形

div {
  // 偏移135deg；从30px（实现圆角矩形使用px可精确控制圆角的大小，开始颜色是透明，则不显示，造成了圆角效果）开始渐变; 渐变到蓝色，但是不要过渡（blue 0 ：这里的0不能省，表示不要过渡）
  background: linear-gradient(135deg, transparent 30px, blue 0);
}

更多特殊效果（参考博客）：https://www.cnblogs.com/zhuhuoxingguang/p/6108236.html

 
 
文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出

对博客文章的参考，若原文章博主介意，请联系删除！请原谅