JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in massa at leo pretium ultricies. Nam cursus ultricies nisl sit amet aliquet. Vestibulum tristique, lectus sed tempor feugiat, augue purus tempor erat, viverra ullamcorper turpis nulla ut nunc. Praesent a ante at dui ultrices eleifend id tempus erat. Pellentesque vitae eleifend felis. Donec tellus tellus, aliquet at adipiscing et, adipiscing et lacus. Morbi vitae commodo metus.
</div>
CSS
.container {
position: relative;
background: gray;
padding: 30px;
overflow: hidden;
}
.container:before, .container:after {
position: absolute;
content: '';
background: red;
display: block;
width: 100%;
height: 30px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.container:after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}