Скос элемента на css

.shape { 
  width: 350px; 
  height: 200px; 
  background: lightgrey; 
  clip-path: polygon(0% 0%, 100% 20%, 100% 100%, 0% 100%); 
} 
 
.shape:before { 
  content: ''; 
  display: block; 
  float: right; 
  shape-outside: polygon(0% 0%, 100% 0%, 100% 20%); 
  width: 100%; 
  height: 100%; 
}

<div class="shape">Так, чтобы содержимое элемента обрезалось по этой границе. Если можно, то как? transform: skew не подходит, так как скашивает обе стороны блока.</div>