CSSでナナメのボックス

<section class="section1">

セクション1です
</section>
 
<section class="section2">
  <h2>セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。</h2>
</section>

.section1 {
background-color: #fff;
color: #000;
padding: 50px 0 100px;
}
.section2 {
background-color: #B8D2ED;
color: #fff;
padding: 10px 0;
}

.section1 {
position: relative;
}
.section1::before {
border-color: transparent #B8D2ED transparent transparent;
border-style: solid;
border-width: 200px 100vw 0 0;
bottom: 0;
content: “”;
height: 0;
position: absolute;
}