写bug小白 2023-06-01 15:21 采纳率: 95.5%
浏览 33
已结题

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

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

实现这样的效果

img

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

  • 写回答

1条回答 默认 最新

  • 前端-杏 2023-06-01 15:49
    关注

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

    <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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题？

问题事件

  • 系统已结题 6月10日
  • 已采纳回答 6月2日
  • 创建了问题 6月1日