如何使用 svg 或 css 创建混合直线/曲线截面边界？

Question

对于我的应用程序，我正在创建一个具有非标准部分边界的注册页面。你可以在这里看到我想要达到的效果： 这不是一个简单的弧线——它有两条直线，中间还有一个弧线。

根据我的阅读，实现此类目标的最佳方法是使用 SVG。问题是，白色区域将有一个图像覆盖整个区域。出于演示目的，我将使用浅蓝色。如果您使用带有

div

属性的标准

background-image

，则 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>
   );
}