JSFiddle - React, Tailwind, and code Playground

by Cthulhu

HTML

<article>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales ultrices ante. Donec laoreet porta aliquam. Donec fermentum a ligula ac malesuada. Duis pellentesque ultricies molestie. Proin pharetra ex ac metus congue, in vulputate nunc cursus. Donec tincidunt metus lacus, nec mattis leo venenatis eu. Vivamus tempor eget nisi sit amet condimentum. Aenean aliquam massa at dui lacinia rutrum. Praesent consectetur augue quis sagittis iaculis. Aenean elementum semper vehicula. Morbi aliquam enim sed dapibus porta. Nunc egestas auctor finibus. Aliquam erat volutpat. Praesent efficitur in ipsum in molestie. 
</article>

CSS

article {
 background: CornflowerBlue;
 color: snow;
 margin: 100px;
 padding: 30px;
 position: relative;
 width: 600px;
}

article:before,
article:after{
  border-style: solid;
  border-width: 0 0 50px 660px;
  border-color: transparent transparent CornflowerBlue transparent;
  content: "";
  display: block;
  height: 0;
  left: 0;
  position: absolute;
  top: -50px;
  width: 0;
}

article:after {
  border-width: 50px 660px 0 0;
  border-color: CornflowerBlue transparent transparent transparent;
  bottom: -50px;
  top: auto;
}