css linear-gradient右三角

CSS `linear-gradient` 可以创建从一个点到另一个点的渐变效果，但它本身并不直接支持创建三角形形状的渐变。如果你想创建一个右三角形渐变，你可以通过组合背景图、伪元素和旋转等技巧来实现。

一个简单的做法是使用两个三角形方向相反的渐变，并叠加它们。首先，创建一个标准的线性渐变，然后使用伪元素（如`:before`和`:after`) 作为三角形的顶点，并应用负的`transform: skewY(-90deg)`来反转其中一个三角形的方向。

以下是一个示例代码：

.triangle-gradient {
  position: relative;
  width: 0;
  height: 0;
  background: linear-gradient(to bottom right, #ff0000, #00ff00);
  /* 创建两个三角形 */
  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent; /* 三角形宽度 */
    border-right: 50px solid transparent; /* 三角形宽度 */
  }
  
  &::before {
    bottom: 100%;
    border-bottom: 50px solid red; /* 原始渐变颜色之一 */
    transform: skewY(-90deg); /* 反转一个三角形 */
  }
  
  &::after {
    bottom: 100%;
    border-bottom: 50px solid green; /* 另一个渐变颜色 */
  }
}

在这个例子中，`.triangle-gradient` 类会创建一个红色和绿色的右三角形渐变。