CSS와 SVG만 사용하여 물결 모양을 어떻게 만들 수 있나요?

CSS를 사용한 물결 모양

CSS3 속성과 SVG를 조합하여 CSS로 물결 모양을 만들 수 있습니다. 수행 방법은 다음과 같습니다.

1. 컨테이너 만들기

SVG 요소를 컨테이너 div 내에 포함하여 모양의 크기를 제어하고 가로 세로 비율을 유지합니다. 다음 CSS를 추가합니다:

.container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
}

2. SVG 요소 추가

컨테이너 내부에 viewBox 및 PreserveAspectRatio 속성이 있는 SVG 요소를 삽입하여 모양의 크기를 설정하고 모양을 유지합니다.

<svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
  <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z">

경로 정의는 다음을 사용합니다. 3차 베지어 곡선을 사용하여 물결 모양을 만듭니다. 획 속성과 채우기 속성은 각각 도형의 윤곽선과 색상을 제어합니다.

3. SVG 배치

SVG 요소가 컨테이너 내 절대 위치에 위치하도록 설정합니다.

svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

컨테이너와 SVG 요소의 크기와 값을 조정하여 원하는 대로 물결 모양 요소의 크기와 모양을 만듭니다.

위 내용은 CSS와 SVG만 사용하여 물결 모양을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!