Dynamically adjust pseudo element height based on viewport width-CodePudding

I'm currently using :before pseudo-element on a 100% width div to display a curved top. This all works fine. I have a fixed height on the :before element. Currently, I'm having to use media queries to keep adjusting the height when the browser width is made smaller. Which isn't ideal. Does anyone know of a JS way of doing it? or even better a pure CSS way? I've attached some code so you can see what I'm doing (best viewing full screen and then adjusting the viewport widths).

My desired result would be to remove all the media query breakpoints and have the height & the top values of the :before pseudo-element and the margin-top of .our-team-panel automatically changed based on the viewport width. I understand because it will involve dynamically changing CSS values I will need the code to be inline (rather than in a separate CSS file).

I have to do this across many different divs. So the curves might be slightly different on each and thus have a slightly different starting height.

.our-team-panel{
  background-color: #d4f938;
  margin-top: 366px;
  position: relative;
  padding: 100px 0;
}

.our-team-panel:before {
  background: transparent url('https://1bluestring.org.uk/our-team-bg-top.svg') no-repeat center bottom -1px;
  content: '';
  position: absolute;
  top: -366px;
  left: 0;
  right: 0;
  width: 100%;
  height: 366px;
}

@media only screen and (max-width: 2000px) {
  .our-team-panel {
    margin-top: 287px;
  }
  .our-team-panel:before{
      top: -287px;
      height: 287px;
  }
}

@media only screen and (max-width: 1500px) {
  .our-team-panel {
    margin-top: 216px;
  }
  .our-team-panel:before{
    top: -216px;
    height: 216px;
  }
}

@media only screen and (max-width: 1000px) {
  .our-team-panel {
    margin-top: 144px;
  }
  .our-team-panel:before{
    top: -144px;
    height: 144px;
  }
}

@media only screen and (max-width: 768px) {
  .our-team-panel {
    margin-top: 111px;
  }
  .our-team-panel:before{
    top: -111px;
    height: 111px;
  }
}

@media only screen and (max-width: 500px) {
  .our-team-panel {
    margin-top: 73px;
  }
  .our-team-panel:before{
    top: -73px;
    height: 73px;
  }
}

<section >
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar magna vitae nulla ultrices, in hendrerit augue rhoncus. Vivamus sodales sapien sit amet ligula malesuada facilisis ac eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed at orci orci. Cras interdum, leo sit amet elementum posuere, nunc tortor cursus turpis, vel posuere nisl justo ut elit. Curabitur velit leo, varius varius sollicitudin euismod, tristique nec ex. In et vulputate risus.</p>

  <p>Nam mattis, elit at ornare bibendum, leo magna imperdiet velit, sit amet pharetra nunc est a nisl. Donec auctor at libero sit amet feugiat. Integer sed orci at lectus porta porttitor sit amet fringilla nisi. Nullam et auctor elit. In euismod scelerisque nulla, ullamcorper dapibus lectus interdum ac. Etiam at ultricies tortor, nec pretium dolor. Nunc euismod tempus elit. Aliquam placerat mauris in aliquam consequat. Morbi at tempus odio. Vestibulum vestibulum facilisis lorem vel varius. Sed eu consectetur magna, non semper massa. Etiam eget molestie dui. Sed convallis urna at massa aliquet pharetra. Vestibulum dictum neque erat, quis fermentum est consectetur a. Sed auctor tortor ex, sit amet lobortis dolor porta ut. Donec auctor in neque in accumsan.</p>
</section>

CodePudding user response：

:root {
  --flexible-height: 15vw;
}

.our-team-panel{
  background-color: #d4f938;
  margin-top: var(--flexible-height);
  position: relative;
  padding: 80px 0;
}

.our-team-panel:before {
  background: transparent url('https://1bluestring.org.uk/our-team-bg-top.svg') no-repeat left bottom -1px;
  content: '';
  position: absolute;
  top: calc(var(--flexible-height) * -1);
  left: 0;
  right: 0;
  width: 100%;
  height: var(--flexible-height);
  background-size: auto 100%;
}

<section >
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar magna vitae nulla ultrices, in hendrerit augue rhoncus. Vivamus sodales sapien sit amet ligula malesuada facilisis ac eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed at orci orci. Cras interdum, leo sit amet elementum posuere, nunc tortor cursus turpis, vel posuere nisl justo ut elit. Curabitur velit leo, varius varius sollicitudin euismod, tristique nec ex. In et vulputate risus.</p>

  <p>Nam mattis, elit at ornare bibendum, leo magna imperdiet velit, sit amet pharetra nunc est a nisl. Donec auctor at libero sit amet feugiat. Integer sed orci at lectus porta porttitor sit amet fringilla nisi. Nullam et auctor elit. In euismod scelerisque nulla, ullamcorper dapibus lectus interdum ac. Etiam at ultricies tortor, nec pretium dolor. Nunc euismod tempus elit. Aliquam placerat mauris in aliquam consequat. Morbi at tempus odio. Vestibulum vestibulum facilisis lorem vel varius. Sed eu consectetur magna, non semper massa. Etiam eget molestie dui. Sed convallis urna at massa aliquet pharetra. Vestibulum dictum neque erat, quis fermentum est consectetur a. Sed auctor tortor ex, sit amet lobortis dolor porta ut. Donec auctor in neque in accumsan.</p>
</section>