如何给CSS创建的三角形形状内部添加渐变效果

你当前通过border属性实现的三角形属于边框样式，无法直接绑定CSS渐变（渐变仅支持应用在元素的背景、背景图类属性上），以下是两种可直接复用的实现方案：

方案1：使用clip-path裁剪实现（最简便，兼容性较好） #

直接给元素添加渐变背景，再通过clip-path属性将元素裁剪为目标三角形形状即可，和你原有三角形的尺寸、形态完全匹配：

<div class="triangle-tl"></div>

.triangle-tl {
  width: 2000px;
  height: 1000px;
  /* 替换为你设计稿对应的渐变参数即可 */
  background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
  /* 三个坐标点分别对应左上角、右上角、左下角，刚好匹配你需要的左上角三角形 */
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

方案2：渐变背景+旋转裁剪（兼容旧浏览器的备选方案） #

如果需要兼容不支持clip-path的低版本浏览器，可以用伪元素旋转的方式实现：

.triangle-tl {
  width: 2000px;
  height: 1000px;
  position: relative;
  overflow: hidden;
}
.triangle-tl::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  /* 尺寸按斜边长度计算，保证旋转后完全覆盖容器 */
  width: 141.4%;
  height: 141.4%;
  background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
  transform-origin: top left;
  /* 角度对应你三角形的斜率：arctan(1000/2000) */
  transform: rotate(-26.565deg);
}

内容的提问来源于stack exchange，提问作者JoeyDaB3Ast