<div class="wrapper">
    <div class="bg-image"></div>
    <div class="content">
        <p>Example with a background image</p>
    </div>
</div>

<div class="wrapper">
    <div class="bg-gradient"></div>
    <div class="content">
        <p>Example with a gradient</p>
    </div>
</div>

/**
 * Down Arrow Mixin
 * 
 * Ever tried to have a little arrow after a div with a
 * background image or a gradient only to find it almost 
 * impossible to get the image/gradient to carry on through
 * into the arrow?
 *
 * This mixin uses css 'clip-path' to achieve the effect.
 * currently it works in Chrome 29+, Firefox 47+, Safari 9.1+, 
 * Opera 39+ iOS Safari 9.2+  and Android Browser 4.4+ 
 * (no IE/Edge support yet but it should gracefully degrade)
 * (http://caniuse.com/#feat=css-clip-path)
 */
@mixin down_arrow($arrow_width: 10%, $arrow_height: 10% ){
    $height: 100% - $arrow_height;
    $left_arrow_pos: 50% - ($arrow_width / 2);
    $right_arrow_pos: 50% + ($arrow_width / 2);

    clip-path: polygon(
        0 0, 
        100% 0%, 
        100% $height, 
        90px $height, 
        60px 100%, 
        30px $height,
        0% $height
    );
    margin-bottom: -($arrow_height / 2);
}


/**
 * This example uses a background image
 */
.bg-image{
    background-image: url(https://unsplash.it/1500/750?image=1041);
    background-size: cover;
    height: 300px;
    @include down_arrow(10%, 10%);
}

/**
 * This example uses a background gradient
 */
.bg-gradient{
    background-image: linear-gradient(to bottom right, red, blue);
    background-size: cover;
    height: 300px;
    @include down_arrow(6%, 6%);
}















*{ margin: 0; padding: 0;}
body{background: #3e4c53; font-family: arial, sans-serif;}
.wrapper{width: 600px; margin: 50px auto;}
.content{text-align: center; background: rgba(white,0.25); padding: 40px;}