JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Сжимайте окно</h1>
<main>
  <section>Просто контент 1</section>
  <section>Вот тут ваша секция со скосом, сжимайте экран, ничего не наезжает и без трансформаций</section>
  <section>Просто контент 2 Просто контент 2 Просто контент 2 Просто контент 2 Просто контент 2 Просто контент 2 Просто контент 2 Просто контент 2 Просто контент 2 Просто контент 2 Просто контент 2 Просто контент 2 Просто контент 2 </section>
  <section>Вот тут ваша секция со скосом, сжимайте экран, ничего не наезжает и без трансформаций</section>
  <section>Просто контент 3</section>
</main>

CSS

section {
  --bevel-size: 60px;
  /* Просто для удобства демо вогнал это в перпеменную */

  color: #fff;
  padding: calc(var(--bevel-size) + 30px) 15px;
  background: url(https://placeimg.com/640/480/animals) no-repeat center center / cover;
  background-color: #eee !important;
}

section:nth-child(even) {
  background: url(https://placeimg.com/1000/580/any/grayscale) no-repeat center center / cover;
  margin: calc(var(--bevel-size) * -1) 0;
  clip-path: polygon(0% 0%, 100% calc(0% + var(--bevel-size)), 100% calc(100% - var(--bevel-size)), 0% 100%);
  -webkit-clip-path: polygon(0% 0%, 100% calc(0% + var(--bevel-size)), 100% calc(100% - var(--bevel-size)), 0% 100%);
  background-color: #999 !important;
  transition: clip-path 1s, margin 1s; /* Для прикола */
}

section:nth-child(3) {
  background: url(https://placeimg.com/600/580/any/animals) no-repeat center center / cover;
}

section:nth-child(4) {
  background: url(https://placeimg.com/600/580/grayscale) no-repeat center center / cover;
}

body {
  font-size: 30px;
  text-align: center;
  margin: 0;
  font-family: sans-serif;
}



/* Опционально меняем значение для меньшего скоса на небольших устройствах */
@media (max-width: 700px) {
 
  section {
    --bevel-size: 20px;
  }

}