带空白的 CSS 对角渐变

Question

我需要帮助用 CSS 重新创建这个背景渐变（不要介意灰色框）

目前我的代码看起来像这样，但是颜色是从左到右而不是像图像中那样从下到上，如果我改变度数，整个方向就会改变：

 body {
  height: 100vh;
  width: 100vw;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 32%,
    rgba(211, 71, 83, 1) 32%,
    rgba(98, 76, 94, 1) 52%,
    rgba(59, 70, 92, 1) 69%,
    rgba(255, 255, 255, 0) 69%
  );
}

Answer 1

保持直线渐变并依靠剪辑路径来创建形状：

html:before {
  content:"";
  position:fixed;
  inset:0;
  background:linear-gradient(red,blue);
  clip-path:polygon(50% 0,100% 0,50% 100%,0 100%)
}