JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
			<section class="color"></section>
			<section class="col-3 ss-style-doublediagonal"></section>
		</div>

CSS

.container {
	overflow: hidden;
	/* we don't want the pseudo-elements sticking out */
}

section {
	position: relative;
	padding: 10em 10%;
	background: red;
	color: #fff;
	text-align: center;
}

.color {
	background: red;
}

/*** Individual section styles and separators ***/

/* Common style for pseudo-elements */
section::before,
section::after {
	position: absolute;

}


/* Double Diagonal line */

.ss-style-doublediagonal {
	z-index: 1;
	padding-top: 6em;
	background: yellow;
}

.ss-style-doublediagonal::before,
.ss-style-doublediagonal::after {
	top: 0;
	left: -25%;
	z-index: -1;
	width: 150%;
	height: 75%;
	background: inherit;
	-webkit-transform: rotate(2deg);
	transform: rotate(2deg);
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;
}

.ss-style-doublediagonal::before {
	height: 50%;
	background: blue;
	-webkit-transform: rotate(4deg);
	transform: rotate(4deg);
	-webkit-transform-origin: 96% 0;
	transform-origin: 96% 0;
}