CSS自定义形状下方放置点状图案图片的层级问题求助

我尝试实现下图的设计效果，用:before和:after伪元素创建了自定义形状，但点状图案图片始终被伪元素遮挡，调整z-index也没解决，求帮忙。

我目前的代码如下：

CSS代码 #

.banner {
  padding-top: 8rem;
  position: relative;
  height: 75rem;
  background: linear-gradient(180deg, #03062f 0%, #180b74 100%);
}
.banner::before, .banner::after {
  position: absolute;
  content: "";
}
.banner::before {
  background: #f1f5f9;
  height: 18rem;
  z-index: 1;
  left: 0;
  width: 100%;
  transform: skewY(4.2deg);
  transform-origin: top right;
  bottom: -19rem;
}
.banner::after {
  width: 16rem;
  height: 16rem;
  border-bottom: solid 8rem #f1f5f9;
  border-right: solid 8rem #f1f5f9;
  border-left: solid 80px transparent;
  border-top: solid 8rem transparent;
  right: 0;
  bottom: -4rem;
  background: #150a6b;
}

.dot-pattern {
  position: absolute;
  z-index: 1;
  height: 14rem;
  bottom: -7.5rem;
}

HTML代码 #

<section class="banner">
      <div class="container h-100 position-relative">
        <div class="dot-pattern">
          <img src="assets/img/svg/dots.svg" alt="dots" />
        </div>
      </div>
    </section>

问题出在z-index的层级上下文：.dot-pattern的父元素.container是position:relative，所以它的z-index只在.container内部生效，而伪元素是.banner的直接子元素，属于.banner的层级上下文，两者不在同一个层级维度，调.dot-pattern的z-index自然没用。

有两种简单的解决办法：

方法一：提升容器的层级 #

给.container设置z-index: 2，让它的层级高于伪元素（伪元素z-index:1），这样容器内的.dot-pattern就能自动覆盖在伪元素上方：

.container.h-100.position-relative {
  z-index: 2;
}

方法二：调整点状图案的父元素 #

把.dot-pattern直接放在.banner下，和伪元素同属一个层级上下文，然后给它设置更高的z-index：

修改后的HTML：

<section class="banner">
  <div class="dot-pattern">
    <img src="assets/img/svg/dots.svg" alt="dots" />
  </div>
  <div class="container h-100 position-relative">
    <!-- 原有内容 -->
  </div>
</section>

修改后的CSS：

.dot-pattern {
  position: absolute;
  z-index: 2; /* 高于伪元素的z-index:1 */
  height: 14rem;
  bottom: -7.5rem;
  right: 0; /* 对应设计图的位置 */
}

两种方法都能解决遮挡问题，根据你的布局需求选一个就行。

内容的提问来源于stack exchange，提问作者ANANTHU C