SVG 또는 CSS를 사용하여 하이브리드 직선/곡선 섹션 경계를 만드는 방법은 무엇입니까?
<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>
