JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hero">
   Hero...
</div>

CSS

body {
    background: #f9f9f9;
}

.hero {
    background: url(http://placekitten.com/1000/500) center center;
    background-size: cover;
    height: 200px;
    position: relative;
}

.hero:before, .hero:after {
    box-sizing: border-box;
    content: " ";
    position: absolute;
    top:0;
    display: block;
    width: 50%;
    height: 100%;
    border: 30px solid orange;
    border-bottom-color: pink;
}

.hero:before {
    left: 0;
    border-right: 20px solid transparent;
    border-left: 0;
}

.hero:after {
    right: 0;
    border-left: 20px solid transparent;
    border-right: 0;
}