css左上方三角形渐变效果

CSS左上方三角形渐变效果可以通过以下代码实现：

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid #00BFFF;
  border-bottom: 50px solid transparent;
  position: relative;
}
.triangle:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100px;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid #0080FF;
  border-bottom: 50px solid transparent;
}

上面的代码中，.triangle代表三角形的主体样式，使用border属性设置了三角形的大小和颜色。其中border-top和border-bottom设置了透明的上下边框，border-right设置了蓝色的右边框，就形成了一个三角形。

为了让三角形出现渐变效果，我们使用triangle:before伪元素来创建一个与主体相同的三角形，并使用left属性把它移动到主体的左边。再次使用border属性，分别设置了三角形的大小和另一种颜色，就形成了一个渐变的三角形效果。

需要注意的是，为了让渐变的三角形在主体上方，要设置伪元素的position属性为absolute，并设置top属性为0。这样就能够把三角形移动到主体的上方了。