根据视口宽度动态调整伪元素高度

Question

我目前在 100% 宽度 div 上使用 :before 伪元素来显示弧形顶部。这一切都很好。我在 :before 元素上有一个固定的高度。目前，当浏览器宽度变小时，我不得不使用媒体查询来不断调整高度。这并不理想。有谁知道这样做的 JS 方式？甚至更好的纯粹 CSS 方式？我附上了一些代码，这样您就可以看到我在做什么（最好全屏观看，然后调整视口宽度）。

我想要的结果是删除所有媒体查询断点，并根据以下条件自动更改 :before 伪元素的高度和顶部值以及 .our-team-panel 的边距顶部视口宽度。我明白，因为它将涉及动态更改 CSS 值，我需要内联代码（而不是在单独的 CSS 文件中）。

我必须在许多不同的 div 中执行此操作。因此每条曲线可能略有不同，因此起始高度略有不同。

.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 class="our-team-panel">
    <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>

Answer 1

: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 class="our-team-panel">
    <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>

根据视口宽度动态调整伪元素高度

Dynamically adjust pseudo element height based on viewport width

css

pseudo-element