JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper"> 
<div class="light big">
    <div class="top triangle"></div>
    <div class="bottom triangle"></div>
</div>
<div class="light small">
    <div class="top triangle"></div>
    <div class="bottom triangle"></div>
</div>
</div>

CSS

#wrapper
{
    width:300px;
    background-color:yellow;
    height:200px;
}
.light {
  padding:50px 0px;
  position: absolute;
  background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255,255,255,1)), color-stop(0.5, rgba(255,255,255,1)), to(rgba(255,255,0,0)));
  background: -webkit-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,0,0));
  background: -moz-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,0,0));
  background: -o-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,0,0));
  background: linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,0,0));
}

.small{
  margin-top:12.5px;
  height: 50px;
  width:150px;
}

.big{
  height: 75px;
  width:200px;
}

.triangle {
  width: 50px;
  position: absolute;
  left: 0;
}

.top {
  top:0;
}
.small .top{
  border-top: 100px solid #ff0; 
  border-right: 50px solid transparent;
}
.big .top{
  border-top: 100px solid #ff0; 
  border-right: 100px solid transparent;
}


.bottom {
  bottom:0;
}
.small .bottom{
  border-bottom: 100px solid #ff0; 
  border-right: 50px solid transparent;
}

.big .bottom{
  border-bottom: 100px solid #ff0; 
  border-right: 100px solid transparent;    
}