Diagonal section

<div class="container">
<!-- The diagonal area -->
<div class="container__diagonal"></div>
<!-- Content -->
...
</div>
.container {
/* Used to position the diagonal area */
position: relative;
}
.container__diagonal {
/* Absolute position */
left: 0px;
position: absolute;
top: 0px;
/* Take full size */
height: 100%;
width: 100%;
/* Create diagonal sides */
transform: skewY(-5deg);
/* Background color */
background-color: rgba(0, 0, 0, 0.3);
/* Displayed under the main content */
z-index: -1;
}

See also

Curved background