Я путаю себя здесь с системой CSS flex?

Question

Я хочу иметь форму многоугольника на фоне моего текста и изображения. однако текст для моего заголовка и абзаца продолжает двигаться. Я думаю, что я запутался здесь, но если кто-нибудь из вас может, пожалуйста, взглянуть на код и увидеть, что я делаю неправильно, это будет действительно оценено!

здесь пи c, чтобы полностью понять, что я имею в виду. заголовок, который я хотел бы видеть в многоугольнике черно-серой формы, а абзац - на белом фоне.

body {
  overflow-x: hidden;
}

section {
  padding: 3.9rem 0;
  overflow: hidden;
}

.container {
  width: 100%;
  max-width: 122.5rem;
  /*this means that the container is only going to be 1225 px. once we're under this particular px, the width 100% will take over*/
  margin: 0 auto;
  /*the margin and padding moves the container in the right position so it is not next to the window screen. to center the container*/
  padding: 0 2.4rem;
}


/*ABOUT-ME*/

.about-me {
  position: relative;
  width: 100%;
  height: 60vh;
  background: linear-gradient(315deg, #485461 0%, #28313b 74%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  /*the margin and padding moves the container in the right position so it is not next to the window screen. to center the container*/
  padding: 0 2.4rem;
  z-index: -1;
}

.about-me:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px;
  background: #fff;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  z-index: -1;
}

.about-me-header {
  margin-top: 150px;
}

.about-me h2 {
  font-size: 5.8rem;
}

.about-me-description {
  width: 100%;
  height: 60vh;
  display: flex;
  justify-content: center;
  align-content: flex-end;
  border: 1px solid black;
}

.about-me-description p {
  line-height: 1.6;
  margin-bottom: 2.4rem;
}

<!-- my story -->
<section id="about-me" class="about-me">
  <div class="container">
    <div class="about-me-header">
      <h2 class="headline">About me</h2>
    </div>
    <div class="about-me-description">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra purus augue, a congue dui lobortis ut. Nullam ut lectus vel felis pellentesque suscipit a vitae augue. Nam pretium congue tempor. Suspendisse eu purus nec tortor lobortis eleifend.
        Proin eleifend, nisl id finibus pulvinar, libero mi pellentesque ipsum, non faucibus nulla lacus nec mi.
      </p>
    </div>
  </div>
</section>
<!-- my story ends -->

Answer 1

Если вы хотите, чтобы многоугольник был только за заголовком, вы должны поместить его на уровне заголовка, а не на уровне контейнера.

Вот простой пример:

HTML file:

<!-- my story -->
<section id="about-me" class="about-me">
    <div class="about-me-header">
      <h2 class="headline">About me</h2>
    </div>
    <div class="about-me-description">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra purus augue, a congue dui lobortis ut. Nullam ut lectus vel felis pellentesque suscipit a vitae augue. Nam pretium congue tempor. Suspendisse eu purus nec tortor lobortis eleifend.
        Proin eleifend, nisl id finibus pulvinar, libero mi pellentesque ipsum, non faucibus nulla lacus nec mi.
      </p>

  </div>
</section>
<!-- my story ends -->

CSS file:

.about-me-header {
  position:relative;
  height: 100px;
}
.about-me-header:before {
  position: absolute;
  content:"";
  display:block;
  width: 100%;
  height: 100%;
  z-index:-1;
  background: blue;
clip-path: polygon(0 0, 100% 0, 100% 20%, 0 100%);
}
.headline {
  text-align: center;
}
.about-me-description {
    max-width: 60%;
    margin: 0 auto;
    border: 1px solid black;
    padding: 5px;
}