Как установить масштабируемый треугольник-фон сайта

Question

В настоящее время я разрабатываю веб-сайт для курса программирования в uni, который можно просмотреть здесь .

В качестве фона я хотел бы разместить треугольник в правом верхнем и нижнем углу уголок разных размеров. Эти треугольники должны охватывать всю страницу , как на прикрепленном изображении . Это будет означать, что они перемещаются при прокрутке и не являются статичными c, как в примере на elasti c beanstalk . Как мне выполнить sh это?

1. Я пробовал складывать два div и внутри фонового div, используя css, как показано ниже

.triangle-top-right {

    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 100rem 0vw 0vw 100vw;
    border-color: #f8f8f8 transparent transparent transparent;
}

.triangle-bottom-right {
    display: inline-block;
    width: 0;
    height: 150rem;
    border-style: solid;
    border-width: 150rem 85vw 0vw 50vw;
    border-color: transparent #f8f8f8 transparent transparent;
}

  <div class="outer">
        <div class="inner" id="pageBackground">
            <div class="triangle-top-right"></div>
            <div class="triangle-bottom-right"></div>
        </div>
        <div class-"inner" id="pageContent"></div>
    </div>

Проблема, с которой я сталкиваюсь, заключается в том, что фоновый div не сохраняет тот же размер, что и div содержимого, когда его содержимое добавляется. Границы как-то тоже больше экрана на некоторых устройствах?

Я пробовал линейные градиенты

linear-gradient(to top right, #efca0c 50%, #F8F8F7 50%) 0 0/100% 25% no-repeat,
linear-gradient(to top left, #efca0c 30%, #F8F8F7 5%) 0 0/100% 25% no-repeat

Но тогда я не могу растянуть его, как на прикрепленном изображении (с градиентами они всегда кажутся идеальными под углом 45 градусов? ), и у меня возникли трудности с наложением двух градиентов в пределах моего обзора.

Какое решение для этого является хорошим или когда я могу найти решение? Помощь очень ценится! Спасибо!