用于自定义形状的 CSS 并在该形状下方添加图像

Question

感谢您提前的帮助。我正在尝试对下图的设计进行编码。为此，我使用了之前和之后来创建形状。但是当我尝试将点图案图像放置在设计中时，我陷入了困境。我尝试了 z-index 但没有成功。任何人都可以帮助我解决这个问题

我写的代码

.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;
}

<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>

Answer 1

您可以使用多边形来处理底部边缘

下面的灰色矩形代表点

如果你想用

polygon

做一些测试，你可以使用这个网站https://bennettfeely.com/clippy/

结果会是这样的

如果它解决了您的问题，请不要忘记标记正确答案。谢谢

:root {
  --width: 800px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box {
  background-color: darkblue;
  width: var(--width);
  height: 300px;
}
.nested-box {
  background-color: blue;
  width: 600px;
  height: 300px;
  margin: auto;
}
.triangle {
  width: var(--width);
  height: 50px;
  background-color: #dd4f39;
  clip-path: polygon(0 0, 103% 0, 96% 100%);
}

.box2 {
  background-color: grey;
  width: var(--width);
  height: 50px;
  position: relative;
  top: -16px;
  z-index: -1;
}

 <div class="container">
      <div class="box">
        <div class="nested-box"></div>
      </div>
      <div class="triangle"></div>
      <div class="box2"></div>
    </div>