CSS Battle 19 negative box

<div class= "triangle"></div>
<div class="trapezoid"></div>
<style>
  body{
    background:#172D2C;
  }
  div{
    position: fixed;
    background:#E9AF53;
    
  }
  .triangle{
    width:180px;
    height: 130px;
    top:20px;
    left:200px;
    clip-path:polygon(0 0, 100% 50%, 0 100%);
  }
  .trapezoid{
    width:180px;
    height: 195px;
    top:85px;
    left:20px;
    clip-path:polygon(0 0, 100% 33.3%, 100% 100%, 0 66.6%);
  }
  
</style>