How to make and diagonal angle section of a website landing page with clip-path (CSS)

diagonal-border.css

/* from: https://backstage.io/ */

.bannerSection:is(.diagonalBorder, .diagonalBottomBorder) + section {
    --diagonalBorderHeight: 46px;
    margin-top: calc(var(--diagonalBorderHeight)*-1);
    padding-top: var(--diagonalBorderHeight);
}
.bannerSection.greenGradientBackground {
    background: linear-gradient(88deg, #9bf0e1 15%, #36baa2 85%);
    color: var(--color-gray-900);
}
.bannerSection.diagonalBorder {
    -webkit-clip-path: polygon(0 var(--diagonalBorderHeight), 100% 0, 100% calc(100% - var(--diagonalBorderHeight)), 0 100%);
    clip-path: polygon(0 var(--diagonalBorderHeight), 100% 0, 100% calc(100% - var(--diagonalBorderHeight)), 0 100%);
}

example.html

<div>
  <section class="bannerSection diagonalBottomBorder greenGradientBackground">
    <div class="container padding-horiz--lg padding-vert--xl">
    <div class="padding--lg text--center">
      <h1>Learn more about the software catalog 1</h1>
      <a href="https://backstage.io/docs/features/software-catalog/" target="_blank" rel="noopener noreferrer" class="button button--secondary">READ</a>
    </div>
    </div>
  </section>
  <section class="bannerSection diagonalBorder greenGradientBackground">
    <div class="container padding-horiz--lg padding-vert--xl">
    <div class="padding--lg text--center">
      <h1>Learn more about the software catalog 2</h1>
      <a href="https://backstage.io/docs/features/software-catalog/" target="_blank" rel="noopener noreferrer" class="button button--secondary">READ</a>
    </div>
    </div>
  </section>
</div>