JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div class="wrap">
    <img src="http://placekitten.com/800/350" />
    <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;
    }
    article{
        padding:20px;
        background:$box_color;
        color:#fff;
        position:relative;
    }
}
article:before, article:after{
    content:'';
    position:absolute;
    width:50%;
    bottom:100%;
    box-sizing:border-box;
}
article:before{
    left:0;
    border-bottom:20px solid #D3D030;
    border-right:20px solid transparent;
}
article:after{
    right:0;
    border-bottom:20px solid #D3D030;
    border-left:20px solid transparent;
}