CSS3 및 SVG를 사용하여 테두리가 있는 물결 모양을 만드는 방법은 무엇입니까?

CSS3 및 SVG를 사용하여 테두리가 있는 물결 모양

CSS3으로 물결 모양을 구현하는 것은 어려울 수 있습니다. CSS3 모양은 다양한 모양을 제공하지만 불규칙한 모양에 테두리를 적용하고 배경색을 설정하는 데에는 부족합니다.

원하는 "테두리가 있는 물결 모양" 효과를 얻기 위해 CSS3의 힘을 활용할 수 있습니다. SVG(확장 가능한 벡터 그래픽). SVG는 복잡한 모양을 정의하는 데 유연성을 제공하며 CSS를 사용하여 쉽게 스타일을 지정할 수 있습니다.

<svg class="panel" width="200" height="54">
  <path d="M0,0 h7 q9,3 12.5,10 l13,30 q3.2,10 13,10 h157 v-50z" fill="white" />
  <path transform="translate(0, -0.5)" d="M0,2 h7 q10,2 13,10 l13,30 q3,9 13,10 h157" fill="none" stroke="#B4CAD8" stroke-width="4" />
  <text x="110.5" y="25" text-anchor="middle">This is a panel</text>
</svg>

SVG 요소를 기본 콘텐츠 옆에 배치하고 오른쪽으로 정렬하면 테두리가 있는 물결 모양의 환상을 얻을 수 있습니다.

.panel {
  position: relative;
  float: right;
  margin-top: -4px;
}

컨테이너 div의 Z-색인을 -1로 설정하여 SVG 요소가 콘텐츠 위에 유지되고 원하는 효과.

따라서 SVG의 유연성과 CSS의 스타일링 기능을 결합하여 CSS3에서 "테두리가 있는 물결 모양" 효과를 얻을 수 있습니다.

위 내용은 CSS3 및 SVG를 사용하여 테두리가 있는 물결 모양을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!