Triangle mask at the bottom of a background image

HTML

<div class="bg">
    <div class="triangle-down-left"></div>
</div>

CSS

.bg {
    width: 500px;
    height:500px;
    position: relative;
    background: url("http://i.imgur.com/ixr4wNC.jpg");
}

/*Down-left pointing*/
.triangle-down-left {
    position: absolute;
    bottom: 0;
    width: 100%; /*controls container width*/
    height: 0;
    padding-bottom: 20%; /*controls container height*/
    overflow: hidden;
}
.triangle-down-left:after {
    position: absolute;
    bottom: 0;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-right: 600px solid transparent; /*controls transparent mask on top of triangle*/
    border-bottom: 100px solid white; /*controls height of triangle*
}