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

Question

上下文

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

这是我要创建的布局：

它本来就是页面的背景，事实上，背景中旋转元素的不透明度和渐变实现起来都很简单。因此，它归结为：

问题

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

尝试的解决方案

我尝试将背景元素设为div，然后我使用transform: rotate() translateX() translateY() 属性来移动它们。这行得通，但当然，它与特定的屏幕尺寸有关。调整屏幕大小后，这些静态 translate 值不会移动，因此元素会离开屏幕。媒体查询在这里可能会有用，但我可能需要很多。
我从我的设计软件中提取了整个背景，并将其制作成一个单独的 SVG。然后我将其应用为具有以下属性的背景：

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

    width: 100vw;
    height: 100vh;
}

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

对于小屏幕尺寸：

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

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;
}

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

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

How to float and pin background elements in a responsive and scalable manner?

html

css

layout

sass

responsive-design

上下文

问题

尝试的解决方案