Untuk permohonan saya, saya sedang mencipta halaman pendaftaran dengan sempadan bahagian bukan standard. Anda boleh melihat apa yang saya cuba capai di sini: Ini bukan lengkok mudah - ia mempunyai dua garis lurus dan lengkok di antaranya.

Setahu saya, cara terbaik untuk mencapai sesuatu seperti ini ialah menggunakan SVG. Masalahnya, kawasan putih akan mempunyai imej yang meliputi keseluruhan kawasan. Untuk tujuan demonstrasi saya akan menggunakan biru muda. Jika anda menggunakan div dengan atribut background-image, warna putih SVG adalah legap, jadi anda mendapat hasil berikut:

Petua kemudian baca sifat shape-out dan clip-path komponen gaya ):

const LeftContainer = digayakan(FlexContainer)` lebar: 55%; ketinggian: 100%; warna latar belakang: biru muda; indeks-z: 1; /* latar belakang: kecerunan linear(360deg, #FFFFFF 24.95%, rgba(255, 255, 255, 0) 50.95%), url(${process.env.PUBLIC_URL}/TestImage.png); `; const RightContainer = digayakan(FlexContainer)` lebar: 45%; ketinggian: 100%; /* warna latar belakang: ${colors.secondary600} */ terapung: kiri; /* background-image: url(${process.env.PUBLIC_URL}/SignUpBackground.svg); background-repeat: tidak-ulang; saiz latar belakang: penutup; latar belakang-kedudukan: tengah; kedudukan: relatif; indeks z: 5; laluan klip: url(${process.env.PUBLIC_URL}/SignUpBackground.svg#sidebar); `;

Masih terdapat jurang, tetapi lebih daripada itu, sepertiga bahagian bawah bentuk SVG dipotong:

Satu-satunya cara saya dapat membuat bekas kiri mengisi ruang tambahan ialah dengan menjadikan bekas kanan position:absolute, tetapi ini menyebabkan masalah dengan borang log masuk yang saya rancang untuk tambah ke kanan ( Nampaknya tidak menyelesaikan masalah memotong sepertiga bahagian bawah svg).

Adakah terdapat cara untuk mengekalkan bekas yang betul dalam aliran halaman, memaparkan 100% svg dan pastikan bekas kiri disiram dengan bekas yang betul?

Edit: Ini ialah kod SVG:

 
Ini ialah komponen React setakat ini (seperti yang anda lihat, peringkat awal binaan): 
 
const SignUpPage = (props) => kembali (   {/* Logo tapak dan salinan pemasaran, buih promosi untuk pergi ke sini haruslah yang mengecil */}   {/* Borang Daftar/Log masuk untuk pergi ke sini */}   ); }
 
Edit 2: Saya telah cuba melaksanakan penyelesaian dalam jawapan di bawah, tetapi setakat ini setiap penyelesaian mempunyai sekurang-kurangnya satu masalah.Bermula dari cadangan ccprog, saya agak tidak pasti kerana kod itu nampaknya tidak sepadan dengan penerangan kaedah, tetapi saya cuba melaksanakannya dan mendapat keputusan ini: (kod dahulu, kemudian imej yang dihasilkan) 
 
const Container = digayakan(FlexContainer)` ketinggian: 523px; imej latar belakang: kecerunan linear(360deg, #FFFFFF 24.95%, rgba(255, 255, 255, 0) 50.95%), url(${process.env.PUBLIC_URL}/SignUpImage.jpg); kedudukan latar belakang: kanan atas 282px; saiz latar belakang: penutup; background-repeat: tidak-ulang; `; const LeftContainer = digayakan(FlexContainer)` flex-grow: 1; ` const RightContainer = digayakan(FlexContainer)` lebar: 354px; imej latar belakang: url('data:image/svg+xml, '); saiz latar belakang: 100% 100%; ` 
Seperti yang anda lihat, ini sebenarnya tidak memenuhi ketinggian penuh skrin, malah di sebelah kanan, dan imej kiri benar-benar terputus (imej kiri adalah isu dengan semua penyelesaian, Kerana anda akan lihat). 
 
Seterusnya, saya cuba melaksanakan penyelesaian kedua Chrwahl. Yang ini agak dekat (bahagian kanan kelihatan hebat), tetapi terdapat beberapa isu dengan imej kiri: 
 
const Container = digayakan(FlexContainer)` lebar: 100%; ketinggian: 100vh; imej latar belakang: url(${process.env.PUBLIC_URL}/SignUpBackground.svg), kecerunan linear(360deg, #FFFFFF 24.95%, rgba(255, 255, 255, 0) 50.95%), url(${process.env.PUBLIC_URL}/SignUpImage.jpg); background-repeat: tidak-ulang; kedudukan latar belakang: kanan, kiri; saiz latar belakang: mengandungi, penutup; jidar bawah: 5px; `;
 
Saya tidak pasti sama ada ia muncul dalam imej itu, tetapi keseluruhan bahagian kiri skrin kosong, jadi walaupun kedudukan ditentukan sebagai kiri, imej itu nampaknya tidak bermula di tepi kiri. Masalah dengan saiz latar belakang: 40%, 70%