<div class="trapez">overflow: hidden;</div>

.trapez{
  margin: 0 auto;
  width: 60mm;
  height: 25mm;
  border-radius: 5mm;
  overflow: hidden;
  border: 1px solid #000;
  position: relative;
  --xdeg: -15;
  --ydeg: 0;
}
.trapez:before{
  --xdeg: inherit;
  --ydeg: inherit;
  content: '';
  position: absolute;
  z-index: -1;
  width: 66mm;
  height: 25mm;
  left: 5mm;
  border-radius: 5mm;
  transform: skewX( calc( var(--xdeg) * 1deg ) ) skewY( calc( var(--ydeg) * 1deg ) );
  background: #c88;
}

/* inner align */
.trapez{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

document.querySelector( '.trapez' ).onclick = e => {
  const el = e.target;
  const flag = el.style.overflow === 'visible';
  el.style.overflow =  flag ? '' : 'visible';
  el.innerText = 'overflow: ' + ( flag ? 'hidden;' : 'visible;' );
}

function roll( el, x, y ) {
  el.style.setProperty( '--xdeg', x % 30 - 15 );
  el.style.setProperty( '--ydeg', y % 10 - 5 );
  setTimeout( roll, 100, el, x+1, y+1 );
}
roll( document.querySelector( '.trapez' ), -15, 0 );