JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <img src="http://placekitten.com/800/350" />
    <div class="arrowborder">
        <div class="arrrowwrap arrowwrapleft"></div>
        <div class="arrrowwrap arrowwrapright"></div>
    </div>
    <article>
        <h1>Hellow World, meow</h1>
    </article>
</div>

SCSS

body {
    background:#fad;
    padding:0;
    margin:0;
}

$arrow_width: 20px;
$arrow_height: 20px;
$box_color: #d3d030;

.wrap {
    img {
        width:100%;
        height:auto;
        vertical-align:bottom;
        position:relative;
        z-index:-123333;
    }
    article {
        padding:20px;
        background:$box_color;
        color:#fff;
        clear:both;
    }
}

.arrowborder {
    margin-top:-$arrow_height;
}

.arrrowwrap {
    box-sizing:border-box;
    width:50%;
    z-index:9999999;
    float:left;
}
.arrowwrapleft {
    border-right: $arrow_width solid transparent; 
    border-bottom: $arrow_height solid $box_color;
}
.arrowwrapright {
    border-left: $arrow_width solid transparent; 
    border-bottom: $arrow_height solid $box_color;
}