JSFiddle - React, Tailwind, and code Playground

HTML

<figure>
  <div></div>
  <p>Cделайте фон на отдельный от контента блок внутри общего родителя, а потом уже обрезайте.Cделайте фон на отдельный от контента блок внутри общего родителя, а потом уже обрезайте. Cделайте фон на отдельный от контента блок внутри общего родителя, а потом
    уже обрезайте. Cделайте фон на отдельный от контента блок внутри общего родителя, а потом уже обрезайте. Cделайте фон на отдельный от контента блок внутри общего родителя, а потом уже обрезайте. Cделайте фон на отдельный от контента блок внутри общего
    родителя, а потом уже обрезайте. Cделайте фон на отдельный от контента блок внутри общего родителя, а потом уже обрезайте. Cделайте фон на отдельный от контента блок внутри общего родителя, а потом уже обрезайте. </p>
</figure>

CSS

figure {
  position: relative;
  max-width: 80%;
  line-height: 1.5;
  background: #ddd; 
}

div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://placeimg.com/1000/1000/any) no-repeat center center / cover;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 36%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 36%);
}

p {
  position: relative;
  z-index: 2;
  padding: 30px;
  color: #fff;
}

* {
  margin: 0;
  font-family: sans-serif;
}