Как сверстать такие укосы?

.blocks { 
  width: 140px; 
  height: 40px; 
  overflow: hidden; 
} 
 
.block { 
  width: 150px; 
  height: 40px; 
  background: rgba(48, 87, 123, .9); 
  transform: skew(25deg)translate(-20px, 0); 
}

<div class="blocks"> 
  <div class="block"></div> 
</div>

.test{ 
  width: 200px; 
  height: 50px; 
  background: red; 
  clip-path: polygon(0 0, calc(100% - 50px) 0, 100% 100%, 0 100px); 
}

<div class="test"></div>