JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <div>
    <h2>Заголовок</h2>
    <p>Тут какой-то контент</p>
    <p>Тут какой-то контент папап ап вапав пап авпавпавпва пва</p>
  </div>
</section>
<section>
  <div>
    <h2>Заголовок</h2>
    <p>Тут какой-то контент</p>
    <p>Тут какой-то длинный контент Тут какой-то длинный контент Тут какой-то длинный контент Тут какой-то длинный контент Тут какой-то длинный контент Тут какой-то длинный контент Тут какой-то длинный контент Тут какой-то длинный контент Тут какой-то длинный контент Тут какой-то длинный контент Тут какой-то длинный контент Тут какой-то длинный контент Тут какой-то длинный контент Тут какой-то длинный контент Тут какой-то длинный контент Тут какой-то длинный контент </p>
  </div>
</section>

CSS

section {
  background: url(https://placeimg.com/200/100/any) center center / cover;
  padding: 15px;
  margin-bottom: 15px;
}

div {
  padding: 60px 90px 60px 30px;
  background-color: rgba(255, 255, 255, 0.85);
  max-width: 200px;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, calc(100% - 60px) 100%, 0% 100%);
  clip-path: polygon(0% 0%, 100% 0%, calc(100% - 60px) 100%, 0% 100%);
}