Bagaimana untuk mencipta sempadan bahagian lurus/melengkung hibrid menggunakan svg atau css?

Question

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:

<svg width="708"tinggi="1056"0 0 708 1056"xmlns=" ;http://www.w3.org/2000/svg">
<clipPath id="bar sisi">
<laluan d="M144.5 0H799.5V1056H144.5L23.4254 775.169C0.402533 721.768 -5.09917 662.442 7.710818"A"L" gt;
</clipPath>
</svg></pra>
<p>Ini ialah komponen React setakat ini (seperti yang anda lihat, peringkat awal binaan): </p>
<pre class="brush:php;toolbar:false;">const SignUpPage = (props) =>
  kembali (
    <Bekas>
      <Bekas Kiri>
        {/* Logo tapak dan salinan pemasaran, buih promosi untuk pergi ke sini haruslah yang mengecil */}
      </LeftContainer>
      <RightContainer flexDirection="lajur"justify="tengah">
        {/* Borang Daftar/Log masuk untuk pergi ke sini */}
      </RightContainer>
    </Bekas>
   );
}

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,<svg viewBox="0 0 708 1056" fill="tiada" xmlns="http://www.w3.org/2000/svg" ;><laluan d="M144.5 0H799.5V1056H144.5L23.4254 775.169C0.402533 721.768 -5.09917 662.442 7.610.499. % 2316979A"/></svg> ');
    saiz latar belakang: 100% 100%;
`</pra>

<p>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). </p>
<p>Seterusnya, saya cuba melaksanakan penyelesaian kedua Chrwahl. Yang ini agak dekat (bahagian kanan kelihatan hebat), tetapi terdapat beberapa isu dengan imej kiri: </p>
<pre class="brush:php;toolbar:false;">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%

Answer 1

Pertama beberapa istilah: kami memanggil lebar kawasan yang diliputi oleh bahagian atas dan bawah bentuk SVG sebagai "min kanan", dan lebar yang diliputi di tengah sebagai "maks kanan".

Cara saya memahami soalan anda ialah kawasan yang betul a) mempunyai lebar tetap dan b) hendaklah sentiasa menunjukkan bentuk SVG penuh. Ia berikutan bahawa ia mesti mempunyai ketinggian malar dan nisbah aspek 708 : 1056. Ini memudahkan untuk mengira dimensi yang diperlukan, paling penting nisbah antara minimum di sebelah kanan dan maksimum di sebelah kanan ialah 564 : 708.

Sekarang, saya cadangkan untuk menyelesaikan masalah anda dengan mengalihkan imej kiri sebagai imej latar belakang ke elemen bekas luar dengan lebar yang memastikan ia berada di bawah bahagian melengkung, iaitu. e. 100% tolak 564px (atau pecahan tetap). Elemen bekas kiri yang mengandungi kandungan promosi mempunyai lebar 100% tolak 708px dan bekas kanan mempunyai lebar 708px (atau pecahan tetap). (Untuk kesederhanaan, bekas dikenal pasti dengan nama kelas yang sepadan dengan nama komponennya)

.container {
    display: flex;
    flex-direction: row;
    justify-items: stretch;
    align-items: stretch;
    height: 523px;
    background-image: linear-gradient(360deg, white, red);
    background-position: top right 282px;
    background-size: cover;
    background-repeat: no-repeat;
}
.container-left {
    flex-grow: 1;
}
.container-right {
    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%;
}
.child {
  box-sizing: border-box;
  height: 100%;
  margin: 2px;
  border: 2px solid blue;
}

<div class="container">
  <div class="container-left">
    <div class="child"></div>
  </div>
  <div class="container-right">
    <div class="child"></div>
  </div>
</div>

Anda boleh menggunakan nilai saiz px lain asalkan anda mengekalkan perkadaran antara nilai tersebut.

Jika anda tidak mahu memaparkan SVG penuh, tetapi hanya ingin memastikan lengkung di sebelah kiri kekal kelihatan sepenuhnya, tambahkan atribut berikut pada elemen akar

preserveAspectRatio="xMinYMid slice"

Ini akan mempunyai kesan yang sama seperti CSS cover 相同的效果，而且 viewBoxcover apabila menukar nisbah bidang bekas yang betul dan kawasan

viewBoxakan sentiasa sama dengan bahagian kiri. Ini hanya berfungsi jika nisbah bidang dialihkan ke ketinggian yang lebih tinggi berbanding dengan lebar. Jika lebar nisbah aspek dinaikkan, bahagian lengkung yang sama akan terputus di bahagian atas dan bawah - tetapi alternatifnya ialah ia tidak cukup lebar untuk menutup bahagian kanan.

Jika anda pergi ke laluan ini, ingat bahawa jika anda menetapkan ketinggian tetap terlebih dahulu, anda hanya mengetahui lebar kawasan antara bahagian kanan maksimum dan minimum. CSS tidak boleh menggunakan ketinggian elemen untuk mengira nilai lebar. 🎜