JSFiddle - React, Tailwind, and code Playground

HTML

<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>

SCSS

body {
    margin: 0;
    padding: 0;
}

@mixin diagonal-background($width, $height, $color) {
    position: relative;
    
    &::after {
        $w_int: $width/1px;
        $h_int: $height/1px;
        $v_pad: ($height / $width) * 100;
            $rgb_color: 'rgb(#{red($color)}, #{green($color)}, #{blue($color)})';

        padding: #{$v_pad}% 0 0;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="#{$w_int}" height="#{$h_int}"><polygon points="0,#{$h_int} #{$w_int},0 #{$w_int},#{$h_int}" style="fill:#{$rgb_color};stroke:#{$rgb_color};stroke-width:0"></polygon></svg>');
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        width: 100%;
        height: 0;
        bottom: 0;
        content: '';
    }
}

.section {
    background: #EF4836;
    height: 60px;
    width: 100%;
    
    @include diagonal-background(1000px, 120px, #2ECC71);
    & + .section {
        background: #2ECC71;
        
        @include diagonal-background(1000px, 90px, #F4D03F);
        
        & + .section {
            background: #F4D03F;
            
            @include diagonal-background(1000px, 60px, #22A7F0);
            
            & + .section {
                background: #22A7F0;
                
                @include diagonal-background(1000px, 30px, #BF55EC);
                
                & + .section {
                    background: #BF55EC;
                }
            }
        }
    }
    
    
}