css使用 linear-gradient 实现渐变三角形

div {
  width: 200px;
  height: 200px;
  background:linear-gradient(to bottom right, #fff 0%, #fff 49.9%, rgba(148,88,255,1) 50%,rgba(185,88,255,1) 100%);
}

效果如下：

image.png

简单介绍这个效果用到的线性渐变属性：

渐变方向

background: linear-gradient(direction, color-stop1, color-stop2, ...);

linear-gradient的第一个传参是direction，控制渐变的方向，默认从上到下渐变，上图效果使用的是对角渐变。to bottom right 顾名思义，“去到右下”，从左上到右下。

渐变的颜色

渐变支持传入多个颜色值，而且可以控制从0-100%分别展示什么颜色。如果只将渐变颜色设置成 #fff -> rgba(148,88,255,1) -> rgba(185,88,255,1)，效果就会变成如下：

background:linear-gradient(to bottom right, #fff 0%, rgba(148,88,255,1) 50%,rgba(185,88,255,1) 100%);
这里我利用了“两个相同颜色的渐变 = 没有渐变”的效果，使用两个白色连续渐变，就实现了图1的效果。

实验的时候发现，可以直接从50%开始设置，也能实现一样的效果：

background:linear-gradient(to bottom right, #fff 50%, rgba(148,88,255,1) 50%,rgba(185,88,255,1) 100%);