SVG または CSS を使用してハイブリッドの直線/曲線セクション境界を作成するにはどうすればよいですか?
<p>私のアプリケーションでは、標準以外のセクション境界を持つ登録ページを作成しています。ここで私が達成しようとしていることを確認できます。
これは単純な円弧ではありません。2 本の直線とその間に 1 つの円弧があります。 </p>
<p>私の知る限り、このようなことを実現する最良の方法は SVG を使用することです。問題は、白い領域に領域全体を覆う画像が表示されてしまうことです。デモ用に、水色を使用します。標準の <code>div</code> を <code>background-image</code> 属性とともに使用すると、SVG の白色は不透明になるため、次の結果が得られます。
</p>
<p>ヒントは後で <code>shape-outside</code> プロパティと <code>clip-path</code> プロパティを読んでください。これが私が試した最新のアプローチです (react with を使用していることに注意してください)スタイル付きコンポーネント ):</p>
<pre class="brush:php;toolbar:false;">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></pre>
<p>これはこれまでの React コンポーネントです (ご覧のとおり、ビルドの初期段階): </p>
<pre class="brush:php;toolbar:false;">const SignUpPage = (props) => {
戻る （
＜コンテナ＞
<左コンテナ>
{/* サイトのロゴとマーケティング コピー、プロモーション バブルはここに移動します。この側を縮小する必要があります */}
</LeftContainer>
<RightContainer flexDirection="column" justify="center">
{/* 登録/ログイン フォームはこちらから */}
</RightContainer>
</コンテナ>
);
}</pre>
<p>編集 2:
以下の回答にある解決策を実装してみましたが、これまでのところ、すべての解決策に少なくとも 1 つの問題があります。ccprog の提案から始めて、コードがメソッドの説明と一致していないようだったので少し自信がありませんでしたが、実装してみたところ、次の結果が得られました。 (最初にコード、次に結果の画像) </p>
<pre class="brush:php;toolbar:false;">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%;
`</pre>
<p>ご覧のとおり、これは右側であっても実際には画面の全高を満たしておらず、左側の画像が実際には切り取られています (左側の画像はすべてのソリューションで問題になります。見る）。 </p>
<p>次に、Chrwahl の 2 番目のソリューションを実装してみました。これはある程度近いものですが (右側は素晴らしく見えます)、左側の画像にはいくつか問題があります: </p>
<pre class="brush:php;toolbar:false;">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;
`;
<p>その画像に表示されているかどうかはわかりませんが、画面の左側全体が空白なので、位置を左に指定しても画像が左端から開始されないようです。 <code>background-size: 40%, 70%</code> の問題はさらに深刻です。
</p>
