JSFiddle - React, Tailwind, and code Playground

HTML

<div class="border top"></div>
  <div class="content">
	<h1>Content</h1>
  </div>
  <div class="border bottom"></div>

CSS

*{margin:0;padding:0;}
body{
  background:#fff;
  color:#fff;
  font-family: Helvetica, Arial, sans-serif
}
h1{text-align:center;}



.border{
    border-width: 0 0 60px 100vw; /* Or use: 0 0 60px 100vw   to invert! */
    border-style: solid dashed;
}
.border.top{    border-color: #D44032 transparent; }
.border.bottom{ border-color: transparent #D44032; }


.content{
   background:#D44032;
}