SVG または CSS を使用してハイブリッドの直線/曲線セクション境界を作成するにはどうすればよいですか?

Question

私のアプリケーションでは、標準以外のセクション境界を持つ登録ページを作成しています。ここで私が達成しようとしていることを確認できます。 これは単純な円弧ではありません。2 本の直線とその間に 1 つの円弧があります。

私の知る限り、このようなことを実現する最良の方法は SVG を使用することです。問題は、白い領域に領域全体を覆う画像が表示されてしまうことです。デモ用に、水色を使用します。標準の div を background-image 属性とともに使用すると、SVG の白色は不透明になるため、次の結果が得られます。

ヒントは後で shape-outside プロパティと clip-path プロパティを読んでください。これが私が試した最新のアプローチです (react with を使用していることに注意してください)スタイル付きコンポーネント ):

const LeftContainer = styled(FlexContainer)`
  幅: 55%;
  高さ: 100%;
  背景色: 水色;
  z インデックス: 1;
  /* 背景: 線形グラデーション(360度, #FFFFFF 24.95%, rgba(255, 255, 255, 0) 50.95%), url(${process.env.PUBLIC_URL}/TestImage.png); */
`;
const RightContainer = styled(FlexContainer)`
  幅: 45%;
  高さ: 100%;
  /* 背景色: ${colors.Secondary600}; */
  フロート: 左;
   /* 背景画像: url(${process.env.PUBLIC_URL}/SignUpBackground.svg); */
  背景リピート: リピートなし;
  背景サイズ: カバー;
  背景位置: 中央;
  位置: 相対的;
  z インデックス: 5;
  クリップパス: url(${process.env.PUBLIC_URL}/SignUpBackground.svg#sidebar);
`;
<p>まだギャップがありますが、それ以上に、SVG 形状の下 3 分の 1 が切り取られています。
</p>
<p>左側のコンテナに余分なスペースを埋める唯一の方法は、右側のコンテナを <code>position:absolute</code> にすることですが、これにより、予定しているログイン フォームで問題が発生します。右側に追加します（SVGの下3分の1を切り取る問題は解決していないようです）。</p>
<p>ページ フロー内で右のコンテナを維持し、SVG を 100% 表示し、左のコンテナが右のコンテナと同じ高さになるようにする方法はありますか? </p>
<p>編集:
これは SVG コードです: </p>
<pre class="brush:php;toolbar:false;"><svg width="708" height="1056" viewBox="0 0 708 1056" fill="none" xmlns=" ;http://www.w3.org/2000/svg">
<clipPath id="サイドバー">
<パス d="M144.5 0H799.5V1056H144.5L23.4254 775.169C0.402533 721.768 -5.09917 662.442 7.71089 605.718L144.5 0Z"fill="#1697 9A "/"
</クリップパス>
</svg>

これはこれまでの React コンポーネントです (ご覧のとおり、ビルドの初期段階):

const SignUpPage = (props) => {
  戻る （
    ＜コンテナ＞
      <左コンテナ>
        {/* サイトのロゴとマーケティング コピー、プロモーション バブルはここに移動します。この側を縮小する必要があります */}
      </LeftContainer>
      <RightContainer flexDirection="column" justify="center">
        {/* 登録/ログイン フォームはこちらから */}
      </RightContainer>
    </コンテナ>
   );
}

編集 2: 以下の回答にある解決策を実装してみましたが、これまでのところ、すべての解決策に少なくとも 1 つの問題があります。ccprog の提案から始めて、コードがメソッドの説明と一致していないようだったので少し自信がありませんでしたが、実装してみたところ、次の結果が得られました。 (最初にコード、次に結果の画像)

const Container = styled(FlexContainer)`
    高さ: 523ピクセル;
    背景画像: 線形グラデーション(360度、#FFFFFF 24.95%、rgba(255、255、255、0) 50.95%)、url(${process.env.PUBLIC_URL}/SignUpImage.jpg);
    背景位置: 右上 282px;
    背景サイズ: カバー;
    背景リピート: リピートなし;
`;

const LeftContainer = styled(FlexContainer)`
    フレックスグロー: 1;
`
const RightContainer = styled(FlexContainer)`
    幅: 354ピクセル;
    背景画像: url('data:image/svg xml,<svg viewBox="0 0 708 1056" fill="none" xmlns="http://www.w3.org/2000/svg" > 979A"/>' );
    背景サイズ: 100% 100%;
`

ご覧のとおり、これは右側であっても実際には画面の全高を満たしておらず、左側の画像が実際には切り取られています (左側の画像はすべてのソリューションで問題になります。見る）。

次に、Chrwahl の 2 番目のソリューションを実装してみました。これはある程度近いものですが (右側は素晴らしく見えます)、左側の画像にはいくつか問題があります:

const Container = styled(FlexContainer)`
  幅: 100%;
  高さ: 100vh;
  背景画像: 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);
  背景リピート: リピートなし;
  背景位置: 右、左。
  背景サイズ: 含む、カバー;
  マージン-ボトム: 5px;
`;

その画像に表示されているかどうかはわかりませんが、画面の左側全体が空白なので、位置を左に指定しても画像が左端から開始されないようです。 background-size: 40%, 70% の問題はさらに深刻です。
            

Answer 1

最初にいくつかの用語について説明します。SVG 形状の上部と下部でカバーされる領域の幅を「右最小」と呼び、中央でカバーされる幅を「右最大」と呼びます。

あなたの質問を私が理解する方法は、右側の領域 a) は一定の幅を持ち、b) は常に完全な SVG 形状を表示する必要があるということです。したがって、must は一定の高さと 708:1056 のアスペクト比を持つ必要があります。これにより、必要な寸法の計算が容易になります。最も重要なのは、右側の最小値と右側の最大値の比率が 564 : 708 であることです。

ここで、左側の画像を背景画像として、曲線部分の下に確実に収まる幅を持つ外側のコンテナ要素に移動することで、問題を解決することをお勧めします。 e. 100% から 564px (または固定端数) を引いた値。プロモーション コンテンツを含む左側のコンテナ要素の幅は 100% から 708 ピクセルを引いたもので、右側のコンテナの幅は 708 ピクセル (または固定端数) です。 (簡単にするために、コンテナーはコンポーネント名と一致するクラス名によって識別されます)

リーリー リーリー

それらの間の比率が維持されている限り、他のピクセル サイズ値を使用できます。

完全な SVG を表示したくないが、左側の曲線が完全に表示されたままであることを確認したいだけの場合は、次の属性をルート # に追加します。 ＃＃ 要素： ＃ ＃＃ リーリー 右側のコンテナのアスペクト比を変更すると、CSS

viewBox

の領域は常に左側になります。これは、アスペクト比が幅に対して相対的に高い高さに移動された場合にのみ機能します。アスペクト比の幅を大きくすると、曲線の同じ部分が上部と下部で切り取られますが、その代わりに、右側をカバーできるほど幅が狭くなります。 この方法を使用する場合、事前に固定の高さを設定した場合、右側の最大辺と最小辺の間の領域の幅しか分からないことに注意してください。 CSS は要素の高さを使用して幅の値を計算することはできません。