JSFiddle - React, Tailwind, and code Playground

HTML

<div class='trapezoid'></div>

CSS

.trapezoid {
  display: inline-block;
  overflow: hidden;
  margin: 0 3em;
  /**outline: solid 1px;/**/
  width: 10em;
  height: 10em;
  transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.trapezoid:before {
  display: block;
  background: red;
  content: '';
}
.trapezoid:before {
  width: 20em; height: 3em;
  transform: rotate(-45deg) translate(-4.142em, -2.6em);
  -webkit-transform: rotate(-45deg) translate(-4.142em, -2.6em);
}