배경 위에 곡선 만들기

웹 개발 영역에서 디자이너는 미적인 목적으로 곡선을 만들어야 하는 경우가 종종 있습니다. . 그러한 시나리오 중 하나는 오른쪽이 아닌 배경 위에 컷아웃 곡선을 배치하는 것과 관련됩니다.

이를 달성하려면 기존 CSS 코드를 수정하여 곡선의 위치와 모양을 조정해야 합니다. 수행 방법은 다음과 같습니다.

1. 의사 요소 위치 조정:

   • 의사 요소의 위치 변경(.box: 이전 및 .box:이후)에서 하단:100%. 그러면 상위 요소 .box의 맨 아래로 이동합니다.

2. 의사 요소 크기 수정:

   • 곡선의 높이를 제어하려면 의사 요소의 높이를 특정 값(예: 80px)으로 설정하세요.
   • 의사 요소의 너비를 50%로 조정하여 .box 너비의 절반을 덮도록 만드세요. .

3. 그라디언트 배경 수정:

   • .box:before 및 .box:after의 방사형 그라데이션 배경 수정 원하는 곡선 모양을 만들어 보세요. 이 기술에는 서로 다른 색상으로 두 개의 그래디언트를 생성하고 이를 원하는 곡선 각도에 배치하는 작업이 포함됩니다.

4. 변환 및 스케일링된 의사 요소:

   • transform:scaleX(-1)를 .box:after에 적용하여 수평으로 뒤집습니다. 그러면 곡선의 거울 효과가 생성됩니다.

이 단계를 따르면 배경 위에 곡선을 성공적으로 생성하고 원하는 컷아웃 효과를 얻을 수 있습니다.