SVG와 CSS를 사용하여 반응형 물결 모양을 만드는 방법은 무엇입니까?

SVG 및 CSS를 사용하여 물결 모양 만들기

질문: CSS를 사용하여 이미지와 유사한 물결 모양을 만들려면 어떻게 해야 합니까? 제공됩니까?

답변:

SVG와 CSS의 조합을 통해 원하는 물결 모양을 얻을 수 있습니다. 포괄적인 접근 방식은 다음과 같습니다.

먼저 SVG 요소를 생성하고 파도의 경로를 정의합니다. 이 경로는 모양의 곡선과 윤곽을 제어합니다. 아래 예에서 경로는 지점 (0, 100)에서 지점 (500, 100)까지 파동을 형성합니다.

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

다음으로 SVG를 보관할 컨테이너 요소를 만듭니다. 이 컨테이너는 물결 모양이 반응성을 유지하도록 보장합니다.

<div class="container">
  <svg viewbox="0 0 500 500" preserveaspectratio="xMinYMin meet">
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z"><p>마지막으로 CSS를 사용하여 컨테이너의 스타일을 지정하여 반응형으로 만들고 SVG를 배치합니다. 컨테이너의 패딩 바닥을 100%로 설정하고 위치를 상대 위치로 설정하면 컨테이너의 사용 가능한 높이를 채우면서 SVG의 가로세로 비율을 유지할 수 있습니다.</p><pre class="brush:php;toolbar:false">.container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
}

이 접근 방식을 사용하면 SVG 물결 모양이 반응합니다. , 용기의 크기에 관계없이 원하는 형태를 유지합니다.