<section id="section1" class="section-bg">
 <div class="c-container">
   <h2>TITLE1</h2>
   <p>テキストテキストテキストテキストテキストテキストテキスト</p>
 </div>
</section>
<section class="section-bg-naname">
 <div class="c-container">
   <h2>TITLE2</h2>
   <p>テキストテキストテキストテキストテキストテキストテキスト</p>
 </div>
</section>

.section-bg-naname{
  position:relative;
  background:yellow;
  padding: 50px;
  transform:skewY(-3deg);
  margin-top:-50px;
}
.section-bg-naname .c-container{
  transform:skewY(3deg);
}

.section-bg{
  background:gray;
  padding: 50px;
  padding-bottom:100px;
}

.c-container {
  margin:50px auto;
  padding:50px;
  max-width:600px;
  background:#fff;
  position:relative;
  z-index:5;
}