前端如何实现在页面上展示梯形图呢

实现这样的效果

有没有友友会的分享下思路，实在不知道怎么实现

应该就是中间那个有问题吧，第一种方法：先设置一个长方形，然后长方形那里定位一个白色的长方形过去挡住对应位置，参考代码

<body>
  <div id="aaaa">
    <div class="a1"></div>
    <div class="a2">
      <div class="a21"></div>
    </div>
    <div class="a3"></div>
  </div>
  <script>

  </script>
  <style>
    #aaaa {
      display: flex;
      align-items: flex-end;
    }
    .a1 {
      width: 200px;
      height: 200px;
      background: #000;
    }
    .a2 {
      width: 400px;
      height: 200px;
      background: rgb(144, 144, 241);
      position: relative;
      overflow: hidden;
    }
    .a21 {
      width: 420px;
      height: 200px;
      background: #fff;
      position: absolute;
      left: 0;
      top: -151px;
      transform: rotate(14deg) translateX(20px);
    }
    .a3 {
      width: 200px;
      height: 100px;
      background: blue;
    }
  </style>
</body>

第二种：中间那个直接弄一个三角形，三角形外边设置一个盒子。使用overflow: hidden把三角形那个尖给截断，参考

<body>
  <div id="aaaa">
    <div class="a1"></div>
    <div class="a2">
      <div class="a21"></div>
    </div>
    <div class="a3"></div>
  </div>
  <script>

  </script>
  <style>
    #aaaa {
      display: flex;
      align-items: flex-end;
    }
    .a1 {
      width: 200px;
      height: 200px;
      background: #000;
    }
    .a2 {
      width: 400px;
      height: 200px;
      position: relative;
      overflow: hidden;
    }
    .a21::after{
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 0px;
      height: 0px;
      border: 200px solid transparent;
      border-left: 800px solid #0082df;
    }
    .a3 {
      width: 200px;
      height: 100px;
      background: blue;
    }
  </style>
</body>