对于我的应用程序，我创建了一个非标准区域边界的注册页面。你可以看到我在这里试图达到的效果：它不是一个简单的弧--它有两条直线，但中间还有一条弧。
从我所读到的内容来看，实现这种功能的最佳方法是使用SVG。问题是，白色区域将有一个覆盖整个东西的图像。出于演示目的，我将使用浅蓝色。如果使用带有background-image属性的标准div，则SVG的白色不是透明的，因此您会得到以下内容：

提示几个小时后阅读shape-outside和clip-path属性，这是我尝试过的最新方法（注意我使用的是带有样式组件的React）：

const LeftContainer = styled(FlexContainer)`
  width: 55%;
  height: 100%;
  background-color: lightblue;
  z-index: 1;
  /* background: linear-gradient(360deg, #FFFFFF 24.95%, rgba(255, 255, 255, 0) 50.95%), url(${process.env.PUBLIC_URL}/TestImage.png); */
`;
const RightContainer = styled(FlexContainer)`
  width: 45%;
  height: 100%;
  /* background-color: ${colors.secondary600}; */
  float: left;
   /* background-image: url(${process.env.PUBLIC_URL}/SignUpBackground.svg); */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 5;    
  clip-path: url(${process.env.PUBLIC_URL}/SignUpBackground.svg#sidebar);
`;

仍然有一个差距，但不仅如此，SVG形状的底部三分之一被切断：

我能够让左边的容器填充额外的空间的唯一方法是让右边的容器position: absolute，但是这会导致我计划添加到右边的登录表单出现问题（而且它似乎没有解决切断svg底部三分之一的问题）。
有没有一种方法可以让右边的容器保持在页面流中，显示100%的svg，并确保左边的容器与右边的容器齐平？
编辑：以下是SVG代码：

<svg width="708" height="1056" viewBox="0 0 708 1056" fill="none" xmlns="http://www.w3.org/2000/svg">
<clipPath id="sidebar">
<path d="M144.5 0H799.5V1056H144.5L23.4254 775.169C0.402533 721.768 -5.09917 662.442 7.71089 605.718L144.5 0Z" fill="#16979A"/>
</clipPath>
</svg>

这里是到目前为止的React组件（如您所见，构建的早期阶段）：

const SignUpPage = (props) => {
  return ( 
    <Container>
      <LeftContainer>
        {/* Site logo and marketing copy, promo bubbles to go here. This side should be the one to shrink */}
      </LeftContainer>
      <RightContainer flexDirection="column" justify="center">
        {/* Signup/Login form to go here */}
      </RightContainer>
    </Container>
   );
}

编辑2：我已经尝试过从下面的答案中实现解决方案，但到目前为止，每一个都至少有一个问题。从ccprog的建议开始，我有点不确定，因为代码似乎与方法的描述不匹配，但我试图实现它并得出以下结果：（先编码，然后生成图像）

const Container = styled(FlexContainer)`  
    height: 523px;
    background-image: linear-gradient(360deg, #FFFFFF 24.95%, rgba(255, 255, 255, 0) 50.95%), url(${process.env.PUBLIC_URL}/SignUpImage.jpg);
    background-position: top right 282px;
    background-size: cover;
    background-repeat: no-repeat;
`;

const LeftContainer = styled(FlexContainer)`
    flex-grow: 1;
`
const RightContainer = styled(FlexContainer)`
    width: 354px;
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 708 1056" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M144.5 0H799.5V1056H144.5L23.4254 775.169C0.402533 721.768 -5.09917 662.442 7.71089 605.718L144.5 0Z" fill="%2316979A"/></svg>');
    background-size: 100% 100%;
`

正如您所看到的，这实际上并没有填满屏幕的整个高度，即使在右侧，左侧图像也被切断了（左侧图像在所有解决方案中都是一个问题，正如您将看到的）。
接下来，我试着实现了chrwahl的第二个解决方案。这一个来了一点接近（右侧看起来很棒），但左侧图像有一些问题：

const Container = styled(FlexContainer)`
  width: 100%;
  height: 100vh;
  background-image: url(${process.env.PUBLIC_URL}/SignUpBackground.svg),
  linear-gradient(360deg, #FFFFFF 24.95%, rgba(255, 255, 255, 0) 50.95%), url(${process.env.PUBLIC_URL}/SignUpImage.jpg);
  background-repeat: no-repeat;
  background-position: right, left;
  background-size: contain, cover;
  margin-bottom: 5px;
`;

我不确定它是否出现在这张图片中，但屏幕的整个左侧都是空白的，所以即使位置被指定为左，图像似乎也不是从左边缘开始的。background-size: 40%, 70%的问题更严重：