JSFiddle - React, Tailwind, and code Playground

HTML

<!-- used classes instead of ideas for reusability -->
<div class="trapezoid">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam aut commodi molestias esse aspernatur non praesentium, animi delectus, facilis omnis, deserunt explicabo nostrum quidem eveniet, voluptatum voluptatem neque sed. Labore!
</div>
<br/>
<div class="trapezoid invert">
  Designing Opposite
  <br> as much as you want
</div>

CSS

.trapezoid {
  position: relative;
  width: 250px; 
  /*height: 200px;*/ /* un-comment to assign fixed height */
  margin: 0 12.5%; /* depends on the values we use in the inline svg later */
}

.trapezoid:before {
  content: '';
  height: 100%;
  width: 150%; /* go over the conent containers with */
  left: -25%; /* and move left to center it */
  position: absolute;
  z-index: -1; /* position behind the content */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 2" preserveAspectRatio="none"><path style="fill: rgb(2, 145, 178);" d="M 0.5 0 L 3.5 0 L 4 2 L 0 2 Z" /></svg>');
  background-size: 100%; /* stretch our svg shape (preserveAspectRatio="none" makes this possible) */
}

.trapezoid.invert:before {
  transform: rotateX(180deg); /* turn around */
  -webkit-filter: hue-rotate(160deg);
  filter: hue-rotate(65deg);
} /* same as before, just different fill color */