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

CSS3에서 테두리가 있는 물결 모양 만들기

CSS3에서 테두리가 있는 물결 모양을 디자인하는 것은 어려울 수 있습니다. CSS3 Shapes를 사용하여 구현하면 원하는 결과를 얻지 못할 수도 있습니다. 대신 SVG와 CSS 위치 지정을 조합하면 원하는 효과를 얻을 수 있습니다.

파도 모양에 SVG 사용

파도 모양에 div 요소를 사용하는 대신, SVG 요소를 사용할 수 있습니다. SVG 내의 경로 요소는 파도의 모양을 정의하는 데 사용될 수 있습니다. 채우기 속성을 흰색으로 설정하여 물결 모양에 단색을 적용할 수 있습니다.

파도 모양에 테두리 추가

테두리를 만들려면 또 다른 경로 요소 SVG에 추가할 수 있습니다. 이 경로는 물결 모양과 모양이 같아야 하지만 약간 더 작아야 합니다. 채우기 속성은 없음으로 설정해야 하며 획 및 획 너비 속성을 사용하여 테두리를 정의해야 합니다.

파도 모양 위치 지정

SVG 요소 CSS를 사용하여 위치를 지정할 수 있습니다. float 속성을 사용하면 SVG를 콘텐츠 오른쪽에 띄울 수 있습니다. margin-top 속성을 사용하면 SVG를 콘텐츠보다 약간 위에 배치할 수 있습니다.

최종 코드

다음 코드는 테두리가 있는 물결 모양의 구현을 보여줍니다. SVG 및 CSS 사용:

<div class="container">
  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates nam fuga eligendi ipsum sed ducimus quia adipisci unde atque enim quasi quidem perspiciatis totam soluta tempora hic voluptatem optio perferendis.</p>
  </div>
</div>
<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>

body {
  background: #007FC1;
}
.container {
  border-bottom: 4px solid #B4CAD8;
}
.container {
  background-color: #fff;
  z-index: -1;
}
.container > .text {
  padding: 0.5em;
}
.panel {
  position: relative;
  float: right;
  margin-top: -4px;
}

이 접근 방식은 SVG를 사용하여 사용자 정의 물결 모양을 만든 다음 그 위에 테두리를 겹칩니다. 추가 경로 요소를 사용합니다. CSS를 이용하여 물결 모양의 위치를 ​​지정하면 원하는 결과가 완성됩니다.

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