Создайте треугольник, угол наклона которого не меняется в css

Question

Я новичок в React, а также в css в целом, и мне интересно, как я могу создать фоновый треугольник для моего приложения, которое принимает ошибку полной ширины, не меняет угол при изменении размера страницы.

Это моя настоящая страница:

And this is the css that come with it :

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

The CSS syntax is not a standard one as i'm using js-css but if you give me an answer with some regular css it fine for me.

And my issue is that as my page skrink down my background triangle become more like this:

введите описание изображения здесь

Кто-нибудь знает, есть ли способ сохранить тот же угол моего треугольника, когда страница скатывается вниз и как переполнение скрывается, когда страница скжимается? Ps: уже пробовал использовать overflow:"hidden" но ничего не меняло

Спасибо за помощь

Answer 1

A linear-gradient может выполнить sh это:

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

Answer 2

Используйте градиент фиксированного размера, как показано ниже:

html {
  min-height:100%;
  background:linear-gradient(to bottom right,white 50%,blue 50%) bottom left/5000px 5000px;
}

Я считал, что высота = ширина, поэтому у вас будет 45 градусов. отрегулируйте его, чтобы получить нужный угол.

Другой пример:

html {
  min-height:100%;
  background:linear-gradient(to bottom right,white 50%,blue 50%) bottom left/5000px 3000px;
}

Вы также можете изменить положение, если хотите зафиксировать его вверху справа

html {
  min-height:100%;
  background:linear-gradient(to bottom right,white 50%,blue 50%) top right/5000px 3000px;
}