Create an inverted triangle.

container.html

<div id="page-container" class="clearfix relative">
    <div id="page-container-triangle" class="clearfix">
        <div class="triangle"></div>
    </div>
    <div id="page-container-content" class"clearfix">
    Insert content here ...
    </div>
</div>

mixin.scss

@mixin createInvertTriangle($color) {
    @extend .absolute;
    left: 0;
    top: -200px;
    width: 100%;
    height: 0;
    padding-left: 50%;
    padding-bottom: 50%;
    overflow: hidden;
    .triangle {
        width: 0;
        height: 0;
        margin-left:-2000px;
        border-left: 2000px solid transparent;
        border-right: 2000px solid transparent;
        border-top: 350px solid $color;
        }

    @media screen and (max-width: 992px) {
        top: -100px;
        .triangle {
            margin-left:-1000px;
            border-left: 1000px solid transparent;
            border-right: 1000px solid transparent;
            border-top: 175px solid $color;
            }
        }
    @media screen and (max-width: 600px) {
        .triangle {
            border-top: 150px solid $color;
            }
        }

    }

triangle.scss

#page-container {
    padding: 225px 0 0;
    overflow: hidden;

    #page-container-triangle {
        @include createInvertTriangle(#fff);
        }

    }
    
  @include media screen and (max-width = 767px) {
    #page-container {
        margin-top: 200px;
        padding-top: 150px;
        }
    }
@include media screen and (max-width = 600px) {
    #page-container {
        margin-top: 150px;
        padding-top: 200px;
        }
    }
@include bp(max-width, 360px) {
    #page-container {
        margin-top: 100px;
        padding-top: 250px;
        }
    }
}