CSS 白色对角线渐变 space

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%)
}

CSS 白色对角线渐变 space

CSS Diagonal Gradient with white space

css

gradient

background-image

linear-gradients