<p>내 신청서에 대해 비표준 섹션 경계가 있는 등록 페이지를 만들고 있습니다. 여기에서 내가 달성하려는 목표를 볼 수 있습니다. 이것은 단순한 호가 아닙니다. 두 개의 직선과 그 사이에 호가 있습니다. </p> <p>내가 아는 한, 이와 같은 것을 달성하는 가장 좋은 방법은 SVG를 사용하는 것입니다. 문제는 흰색 영역이 전체 영역을 덮는 이미지를 갖게 된다는 것입니다. 시연을 위해 하늘색을 사용하겠습니다. <code>배경 이미지</code> 속성과 함께 표준 <code>div</code>를 사용하는 경우 SVG의 흰색은 불투명하므로 다음과 같은 결과를 얻습니다. </p> <p>나중에 <code>shape-outside</code> 및 <code>clip-path</code> 속성을 읽어보세요. 이것이 제가 시도한 최신 접근 방식입니다. ):</p> <pre class="brush:php;toolbar:false;">const LeftContainer = styled(FlexContainer)` 너비: 55%; 높이: 100%; 배경색: 연한 파란색; Z-색인: 1; /* 배경: 선형 그라데이션(360deg, #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) */ background-repeat: 반복하지 않음; 배경 크기: 표지; 배경 위치: 중앙; 위치: 상대; Z-인덱스: 5; 클립 경로: url(${process.env.PUBLIC_URL}/SignUpBackground.svg#sidebar); `;</pre> <p>여전히 간격이 있지만 그 이상으로 SVG 모양의 아래쪽 1/3이 잘립니다. </p> <p>왼쪽 컨테이너가 추가 공간을 채우도록 할 수 있었던 유일한 방법은 오른쪽 컨테이너를 <code>위치:절대</code>로 만드는 것이었지만 이로 인해 내가 계획하고 있는 로그인 양식에 문제가 발생했습니다. 오른쪽에 추가하세요(svg의 하단 1/3을 자르는 문제는 해결되지 않는 것 같습니다).</p> <p>페이지 흐름에서 오른쪽 컨테이너를 유지하고 svg를 100% 표시하며 왼쪽 컨테이너가 오른쪽 컨테이너와 같은 높이인지 확인하는 방법이 있나요? </p> <p>편집: SVG 코드는 다음과 같습니다. </p> <pre class="brush:php;toolbar:false;"><svg width="708" height="1056" viewBox="0 0 708 1056" ;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"채우기="A"/> ; </clipPath> <p>이것은 지금까지의 React 구성 요소입니다(보시다시피 빌드 초기 단계). </p> <pre class="brush:php;toolbar:false;">const SignUpPage = (props) => 반품 ( <컨테이너> <왼쪽컨테이너> {/* 사이트 로고 및 마케팅 카피, 프로모션 풍선은 여기에 표시되어야 합니다. */} </왼쪽컨테이너> <RightContainer flexDirection="column" justify="center"> {/* 여기로 이동하려면 가입/로그인 양식 */} </오른쪽컨테이너> </컨테이너> ); }</pre> <p>편집 2: 아래 답변에서 솔루션을 구현해 보았지만 지금까지 모든 솔루션에는 적어도 하나의 문제가 있습니다.ccprog의 제안부터 시작하여 코드가 메서드 설명과 일치하지 않는 것 같아서 약간 확신이 없었지만 구현을 시도했고 다음과 같은 결과를 얻었습니다. (코드를 먼저 작성한 다음 결과 이미지를 얻음) </p> <pre class="brush:php;toolbar:false;">const 컨테이너 = styled(FlexContainer)` 높이: 523px; 배경 이미지: 선형 그라데이션(360deg, #FFFFFF 24.95%, rgba(255, 255, 255, 0) 50.95%), url(${process.env.PUBLIC_URL}/SignUpImage.jpg); 배경 위치: 오른쪽 상단 282px; 배경 크기: 표지; background-repeat: 반복하지 않음; `; const LeftContainer = styled(FlexContainer)` 플렉스 성장: 1; ` const RightContainer = styled(FlexContainer)` 너비: 354px; 배경 이미지: url('data:image/svg+xml,<svg viewBox="0 0 708 1056" fill="none" xmlns="http://www.w3.org/2000/svg" ;><경로 d="M144.5 0H799.5V1056H144.5L23.4254 775.169C0.402533 721.768 -5.09917 662.442 7.71089 605.718L144.5 0Z" 채우기="% 2316979A"/> '); 배경 크기: 100% 100%; `</pre> <p>보시다시피 오른쪽에서도 실제로 화면의 전체 높이를 채우지 못하고 왼쪽 이미지가 실제로 잘립니다(왼쪽 이미지는 모든 해결 방법의 문제입니다. 보다). </p> <p>다음으로 Chrwahl의 두 번째 솔루션을 구현해 보았습니다. 이것은 다소 비슷하지만(오른쪽이 보기 좋습니다) 왼쪽 이미지에는 몇 가지 문제가 있습니다. </p> <pre class="brush:php;toolbar:false;">const 컨테이너 = styled(FlexContainer)` 너비: 100%; 높이: 100vh; 배경 이미지: url(${process.env.PUBLIC_URL}/SignUpBackground.svg), 선형 그라데이션(360deg, #FFFFFF 24.95%, rgba(255, 255, 255, 0) 50.95%), url(${process.env.PUBLIC_URL}/SignUpImage.jpg); background-repeat: 반복하지 않음; 배경 위치: 오른쪽, 왼쪽; 배경 크기: 포함, 표지; 여백 하단: 5px; `;</pre> <p>저 이미지에 나오는지는 잘 모르겠지만 화면 왼쪽 전체가 비어 있어서 위치를 왼쪽으로 지정해도 이미지가 왼쪽 가장자리부터 시작되지 않는 것 같습니다. <code> background-size: 40%, 70%</code>의 문제는 더 심각합니다. </p>