Z CSS próbuję osiągnąć następujący efekt, który reaguje na zmianę rozmiaru ekranu (dla responsywnego projektu). W szczególności chcę, aby trójkąt był proporcjonalnie mniejszy w miarę zmniejszania się okna przeglądarki. Wyśmiałem to jako PNG (to nie jest HTML / CSS):

Do tej pory używam tego kodu jako bazy, z 2 stosami div na siebie:

CSS:

.pinkbox {
    background-color: #FF8290;
    width: 100%;
    height: 100px;
}

.greenbox {
    background-color: #85D782;
    width: 100%;
    height: 100px;
}

HTML:

<div class="pinkbox"></div>
<div class="greenbox"></div>