panday inverted flask

<style>
  html,body{
    margin: 0;
    padding: 10% 30%;
  }
  .top-element {
    width: 800px;
    border-top: 100px solid rgb(147, 65, 240);
  }
  .middle-element {
    width: 600px;
    margin-left: 100px;
    border-top: 100px solid rgb(211, 184, 242);
  }
  .bottom-element {
    width: 400px;
    margin-left: 200px;
    border-top: 100px solid rgb(147, 65, 240);
  }

  .common{
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
  }
  .body{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
<body>
  <div class="body">
    <div class="center-div">
      <div class="top-element common"></div>
      <div class="middle-element common"></div>
      <div class="bottom-element common"></div>
    </div>
  </div>
</body>
Editor is loading...