JSFiddle - React, Tailwind, and code Playground

HTML

<div class="div-2"></div>
<div class="div-1">
    <div class="decor-top">
        <svg class="decor" height="100%" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 0 L50 100 L100 0z" stroke-width="0"></path>
        </svg>
    </div>
</div>

CSS

.div-1 {
    background-image: url('http://kidsplanet.ancorathemes.com/wp-content/uploads/2015/07/slider11.jpg');
    height:250px;
    width:100%;
    position:relative;
}
.div-2 {
    background-image: url('http://kinderhtml.themerex.net/img/bg/texture_2.png');
    height:250px;
    width:100%;
    background-color:green;
    position:relative;
}
.decor-top {
    position:absolute;
    height:30px;
    top:0;
    width:100%;
     fill: #fff;
  stroke: #fff;
}