<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;}