JSFiddle - React, Tailwind, and code Playground

HTML

<section>
    <div>
        <p> Section 1</p>
    </div>
</section>
<div class="diagonal">
    
</div>	
<section>
    <div>
        <p> Section 2</p>
    </div>
</section>
<div class="diagonal"></div>
<section>
    <div>
        <p> Section 3</p>
    </div>
</section>
<div class="diagonal"></div>

CSS

section {
	width: 80%;
	margin: 0 auto;
	padding: 3em 10%;
    background: red;
    overflow:hidden;
}
.diagonal{
    width: 100%;
    height: 50px;
    overflow: hidden;
    position: relative;
}
.diagonal:after{
    content: '';
    height: 40px;
    background: black;
    display: block;
    position: absolute;
    top: -39px;
    left: -5px;
    width: 200%;
    transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    -webkit-transform: rotate(-2deg);
}