创建不改变css中角度的三角形

Question

我在React和CSS中都相当陌生，我想知道如何为我的应用创建一个背景三角形，该三角形带有全角错误，但是在调整页面大小时不会改变角度。

这是我的实际页面：

这是它附带的css：

  diagonaleBottom: {
    position: "absolute",
    bottom: 0,
    width: "100%",
    height: "35%",
    clipPath: "polygon(100% 100%, 0 100%, 100% 0)",
    background: "#082333",
    zIndex: 1,
  },

CSS语法不是标准语法，因为我使用的是js-css，但是如果您给我一些常规CSS的答案，对我来说很好。

而且我的问题是，随着页面向下滑动，背景三角形越来越像这样：

有人知道当页面缩水时是否有办法保持我的三角形相同的角度，而当页面缩水时溢流会消失吗？附言：我已经尝试使用overflow:"hidden"，但它没有做任何更改

谢谢您的帮助

Answer 1

linear-gradient可以做到这一点：

body {
  min-height: 100vh;
  background: linear-gradient(-30deg, tomato 50%, bisque 50%);
}