JSFiddle - React, Tailwind, and code Playground

HTML

<div class="triangleClipper">
  <div class="designElement"></div>
</div>

CSS

.triangleClipper {
  height: 100px;
  overflow: hidden;
}

.designElement {
  background: linear-gradient(to right, #03cc65, #fbfe02); 
  height: 100px;
  width: 200%;
  transform-origin: top left;
  transform: rotate(-2deg);
  margin-top: -60px;
}