SVG / 섹션

SVG 도형 구분선: 섹션 가장자리와 레이어

진폭, 주파수, 높이, 뒤집기, 반전 채우기와 최대 3개 레이어를 사용해 8가지 SVG 섹션 구분선 도형을 생성합니다. 섹션을 미리 보고 SVG, CSS, HTML을 복사할 수 있습니다.

SVG 도형 구분선: 섹션 가장자리와 레이어: 웨이브, 곡선, 기울기, 삼각형, 화살표, 지그재그, 구름, 산 모양 중 하나를 선택하고 높이, 진폭, 반복 횟수를 조정합니다. 도형을 뒤집거나 반전하고 최대 3개 레이어를 쌓을 수 있습니다. 구분선은 모든 페이지 너비에 맞게 늘어나며, SVG, 위치 지정 CSS 또는 바로 사용할 수 있는 HTML 섹션을 복사할 수 있습니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.

카테고리: 개발자 도구
실행 횟수: 브라우저에서
비용: 무료 · 가입 불필요
사용 가능 여부: 사용 가능

SVG 도형 구분선로컬 처리

브라우저에서 전부 실행됩니다

섹션 미리 보기

분위기를 바꿔 보세요.

두 섹션 사이에 모양이 있는 가장자리를 만듭니다.

SVG 코드

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg>

CSS 위치 지정

.section { position: relative; overflow: hidden; padding-bottom: 160px; }
.section-divider { position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; pointer-events: none; }
.section-divider svg { display: block; width: 100%; height: 100%; }

HTML 섹션

<section class="section">
  <div class="section-divider" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg></div>
</section>

끊김 없는 가장자리를 만들려면 다음 섹션의 배경 색상을 사용하십시오. 하단 구분선을 상단으로 옮길 때는 세로로 뒤집으십시오.

닫힌 경로와 좌표

SVG 2는 closepath와 cubic 경로 명령을 정의합니다: https://www.w3.org/TR/SVG2/paths.html . viewBox는 이 좌표를 뷰포트에 매핑합니다: https://www.w3.org/TR/SVG2/coords.html

도형의 출처

파형 도형은 SVG Wave Generator 및 SVG Blob Generator와 동일한 부드러운 곡선을 사용하며, 다른 프로필은 간단한 공식으로 그립니다. 타사 아트워크는 포함되지 않으므로 출력물을 자유롭게 사용할 수 있습니다.

사용 방법

도형을 선택하고 진폭, 주파수, 높이를 조정합니다.
레이어, 불투명도, 색상을 설정한 다음 섹션 가장자리와 뒤집기 옵션을 선택합니다.
SVG, 위치 지정 CSS, 섹션 HTML을 복사하거나 SVG를 다운로드합니다.

개인정보 보호 및 제한사항

도형 생성과 다운로드는 전부 브라우저에서 실행됩니다.

자주 묻는 질문

가장자리를 다른 섹션과 자연스럽게 연결하려면 어떻게 해야 하나요?

해당 섹션의 배경색을 구분선 채우기 색상으로 사용하십시오. CSS가 구분선 공간을 확보하고 선택한 가장자리에 절대 위치로 배치합니다.

웨이브 도구와 무엇이 다른가요?

이 도구는 7가지 다른 도형, 반전 기능, 섹션 HTML을 제공합니다. 기존 SVG Wave Generator는 무작위 웨이브와 웨이브 전용 추가 설정을 제공합니다. SVG Blob Generator는 독립적인 유기적 도형을 생성합니다.

반전은 어떤 기능인가요?

반전은 경로가 아래쪽이 아니라 위쪽을 향해 닫히도록 합니다. 구분선 가장자리는 그대로 유지됩니다. 세로 뒤집기는 도형 전체를 반사합니다.

무료 도구 · 브라우저에서회 실행 · 계정 불필요