JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class="top-trapeze">
  <i class="top-shevron-left"></i>
  <i class="top-shevron-right"></i>
</div>
<div class="bottom-trapeze">
  <i class="bottom-shevron-left"></i>
  <i class="bottom-shevron-right"></i>
</div>

SCSS

body{
  font-size:12px;
}
@function s($size) {
  @return (($size*320)/(750*12))+em;
}
.top-trapeze{
  width:s(515);
  height:s(70);
  background:#6dffff;
  margin:auto;
  position:relative;
  &:before{
    content:"";
    display:block;
    position:absolute;
    width:s(50);
    height:s(70);
    transform:skewX(-19deg);
    background:#6dffff;
    left:s(-23);
  }
  &:after{
    content:"";
    display:block;
    position:absolute;
    width:s(50);
    height:s(70);
    transform:skewX(19deg);
    background:#6dffff;
    right:s(-23);
  }
}
.bottom-trapeze{
  @extend .top-trapeze;
  background:#49bcff;
  transform:rotate(180deg);
  &:before, &:after{
    background:#49bcff;
  }
}
.top-shevron-left{
  position:absolute;
  left:s(-49);
  &:before{
    content:"";
    display:block;
    position:absolute;
    height:s(70);
    width:s(14);
    background:#6dffff;
    transform:skewX(-19deg);
  }
  &:after{
    content:"";
    display:block;
    position:absolute;
    height:s(70);
    left:s(-24);
    width:s(14);
    background:#6dffff;
    transform:skewX(-19deg);
  }
}
.bottom-shevron-right{
  @extend .top-shevron-left;
  transfrom:rotate(180deg);
  &:before, &:after{
    background:#49bcff;
  }
}

.top-shevron-right{
  position:absolute;
  right:s(-49);
  &:before{
    content:"";
    display:block;
    position:absolute;
    height:s(70);
    width:s(14);
    right:0;
    background:#6dffff;
    transform:skewX(19deg);
  }
  &:after{
    content:"";
    display:block;
    position:absolute;
    height:s(70);
    right:s(-24);
    width:s(14);
    background:#6dffff;
    transform:skewX(19deg);
  }
}
.bottom-shevron-left{
  @extend .top-shevron-right;
  transfrom:rotate(180deg);
  &:before, &:after{
    background:#49bcff;
  }
}