css html shape

<style>
.parts{
  position: absolute;
}

.trapezoid{
  transform: perspective(200px) rotateX(45deg);
}
.cylinder-v{
  border-radius:50% / 10%;
}
.paper {
  position:absolute;

  background-color: #fff;
  border:1pt solid black;
  box-shadow: 2px 1px 1px rgba(0,0,0,0.15);
}
</style>

<div class="" style="position:relative;width:400pt;height:360pt;border:4pt solid lightgray;">
  <div class="parts trapezoid" style="border:2pt solid brown; left:100pt;top:20pt; width:60pt;height:100pt; display:flex;align-items:center;">
  trapezoid  
  </div>

  <div class="parts cylinder-v" style="border:1pt solid #55ccee; background:#aaffdd; width:80pt;height:120pt;left:270pt;top:120pt;">cylinder</div>

  <div>
    <div class="parts paper" style="width:100pt;height:200pt;left:124pt;top:284pt;width:40pt;height:60pt;background-color: #eee;"></div>
    <div class="paper" style="left:122pt;top:282pt;width:40pt;height:60pt;background-color: #eee;"></div>
    <div class="paper" style="left:120pt;top:280pt;width:40pt;height:60pt;">paper</div>
  </div>