css - 如何让波浪占据屏幕的 50%？

Question

在 CSS 中，我想制作一个 50% 的一种颜色和 50% 的另一种颜色的背景，但这种颜色需要用这样的波浪来终止:

其实我有:

但它不会占用屏幕的 50%。

这是我的代码:

body {
  background-color: #3f2982;
}

#wavebg {
  position: relative;
  content: "";
  bottom: 0;
  background: url('https://i.imgur.com/IJelEnu.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 50%;
  height: 100%;
  float: left;
}

<div id='wavebg'></div>

如何更改它以占据屏幕的 50%？

Answer 1

body {
      background-color: #3f2982;
      
    }

    #dark-bg {
      width: 45%;
      height: 100vh;
      background-color: #27184f;
      float: left;
    }

    #wavebg {
      position: relative;
      content: "";
      bottom: 0;
      background: url(https://i.imgur.com/IJelEnu.png);
      background-size: contain;
      background-repeat: no-repeat;
      width: 50%;
      height: 100vh;
      float: left;
    }

  <div id="bg-container">
    <div id="dark-bg"></div>
    <div id='wavebg'>
    </div>
  </div>

由于图像的宽度不足以覆盖屏幕宽度的 50%，因此背景图像看起来就像卡在浏览器的左边框中一样。 诀窍是立即在图像左侧应用一个与图像颜色相同的 div。 这将使您在屏幕的大约中心获得所需的波浪结果。您可能需要使用 css @media 查询调整 #dark-bg 宽度，以获得更好的响应式布局。

真心希望对您有所帮助。这是您可以获得的结果: