CSS triangle below gradient div

HTML

<div id="header" class="page-talk">
            <h1 class="page-title">talk</h1>
    </div>

CSS

html, body {
        margin:0;
        padding:0;
    }
    div#header {
        height: 150px;
        width: 100%;

        background-image: -webkit-linear-gradient(45deg, #ff5071 0%, #5fd6e5 50%, #00ffab 100%);
        background-image: -moz-linear-gradient(45deg, #ff5071 0%, #5fd6e5 50%, #00ffab 100%);
        background-image: -o-linear-gradient(45deg, #ff5071 0%, #5fd6e5 50%, #00ffab 100%);
        background-image: linear-gradient(45deg, #ff5071 0%, #5fd6e5 50%, #00ffab 100%);
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        z-index: 100;
    }
    h1.page-title {
        font-size: 6em;
        font-weight: 100;
        font-family:sans-serif;
        color: white;
        margin:0;
        margin-left:15px;
    }
    #header {
        position: relative;
    }
    #header:before {
        content:"";
        display: block;
        position: absolute;
        bottom: 0;
        width: 50%;
        left: 0;
        border-bottom: 20px solid rgba(255, 255, 255, 1);
        border-right: 20px solid transparent;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    #header:after {
        content:"";
        display: block;
        position: absolute;
        bottom: 0;
        width: 50%;
        right: 0;
        border-bottom: 20px solid rgba(255, 255, 255, 1);
        border-left: 20px solid transparent;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }