JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">  
  <div class="kek">
    <div class="inner-kek">
       text
    </div>
  </div>
</div>

CSS

body {
    background-color: #eee;
  
}
.outer {
  width: 300px;
  height: 100px;
  margin: 65px auto;
}
.kek {

    width: 100%;
    height: 100%;
    transform: skew(-20deg);
    transform: skewY(-15deg);
    background-color: orange;
    overflow:hidden;
    }
    
    .kek:before {
      position: absolute;
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      background: url('https://avatars.mds.yandex.net/get-pdb/33827/8c185ba5-0056-4958-880b-f2a0e2a6f375/s1200') no-repeat;
      transform: skew(20deg);
 transform: skewY(15deg); 
 background-size: 150%;
    }

.inner-kek {
 position: absolute;
 margin-top: 50px;
 margin-left: 150px;
 z-index: 1;
 transform: skew(20deg);
 transform: skewY(15deg);
}