JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<section class="section-1"></section>
<section class="section-2"></section>
<section class="section-3"></section>

CSS

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
section{
	min-height: 150px;
}
.section-1,
.section-3{
	background: #ccc;	
}
.section-2{
	background: #999;
	height: 200px;
	margin: -50px auto;
	-webkit-clip-path: polygon(30% 0%, 84% 14%, 100% 14%, 100% 89%, 70% 100%, 15% 85%, 0 85%, 0% 9%);
clip-path: polygon(30% 0%, 84% 14%, 100% 14%, 100% 89%, 70% 100%, 15% 85%, 0 85%, 0% 9%);
}