JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="header">
  <div class="left-back"></div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}
.header {
  height: 300px;
  background: url(http://www.stnn.ru/_data/objects/0000/1516/img.1516.dom5_600.jpg) no-repeat center;
  background-size: cover;
}
.header .left-back{
  height: 100%;
  -webkit-clip-path: polygon(0 0, 50% 0, 35% 100%, 0 100%);
  clip-path: polygon(0 0, 50% 0, 35% 100%, 0 100%);
  background: green;
}