<div class="hero">
</div>

body {
    background-color: #eaeaea;   
}

.hero {
    position: relative;
    height: 300px;
    background-image: linear-gradient(#4568dc, #b06ab3);
}

.hero::after {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='tomato' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,0 0,100' /%3E%3C/svg%3E");   
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: '';
    height: 10vw;
    width: 100%;
    position: absolute;
    bottom: -10vw;
}