如何以响应式和可扩展的方式浮动和固定背景元素？

Question

上下文

我是一个比前端更好的后端开发人员，这就是我认为我遇到问题的原因。对于一个新项目，我设计了一个如下所示的布局，我想在我的 React 项目中实现它 - 使用 CSS/SCSS。

这是我要创建的布局：

它应该是页面的背景，事实上，背景中旋转元素的不透明度和渐变都是微不足道的。因此，归根结底是这样的：

问题

我遇到的问题是我不确定如何设置这三个旋转的背景元素的样式，以使它们保持固定在屏幕边缘、响应并随着屏幕尺寸的变化而缩放.我不确定是否最好通过媒体查询手动实现不同的尺寸，或者是否有一种适合所有尺寸的解决方案。

尝试的解决方案

1. 我尝试将背景元素设为 div，然后使用transform: rotate() translateX() translateY() 属性移动它们。这行得通，但当然，它与特定的屏幕尺寸相关。调整屏幕大小后，那些静态的translate 值不会移动，因此元素会离开屏幕。媒体查询在这里可能很有用，但我可能需要很多。

2. 我从我的设计软件中提取了整个背景，并将其制作成一个单独的 SVG。然后我将其应用为具有以下属性的背景：

body {
    background-image: url('path/to/img.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    width: 100vw;
    height: 100vh;
}

这也不起作用，因为当您减小屏幕尺寸时，它似乎会裁剪图像。对于大屏幕尺寸，您有：

对于小屏幕尺寸：

如果这是一个有点愚蠢的问题，我深表歉意。正如我所说，我在前端设计方面并不出色，因为我大部分时间都花在了服务器上。感谢您的帮助/时间。

Answer 1

只用背景构建整体：

html {
  min-height:100%;
  background:
  /* left part*/                                                               /* position      / width height */
    linear-gradient(to bottom left,transparent 49.5%,rgba(255,255,255,0.2) 50%) left 0 top -80px / 80px 200px,
    linear-gradient(to top   left ,transparent 49.5%,rgba(255,255,255,0.2) 50%) left 0 top 120px / 80px 70px,
    /* right part*/
    linear-gradient(to bottom right,transparent 49.5%,rgba(0,0,0,0.5) 50%) right 0 top 20px / 80px 70px,
    linear-gradient(to top right   ,transparent 49.5%,rgba(0,0,0,0.5) 50%) right 0 top 90px / 80px 200px,
    /* bottom part*/
    linear-gradient(to bottom right,transparent 49.5%,rgba(255,255,255,0.5) 50%) bottom 0 left 20px / 200px 80px,
    linear-gradient(to bottom left ,transparent 49.5%,rgba(255,255,255,0.5) 50%) bottom 0 left 220px / 70px 80px,
    /* main background */
    linear-gradient(45deg,#5fd6df,#e23bf5);
   background-repeat:no-repeat;
}

每个渐变都是一个三角形，您只需为每个部分使用两个三角形，您可以根据需要调整大小和位置。