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

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

Shapes를 사용하여 CSS3에서 물결 모양을 디자인하려고 하면 원하는 결과가 나오지 않을 수 있습니다. 테두리 및 배경색 설정의 제한으로 인해 가능합니다. 이 문제를 극복하려면 물결 모양에 div 대신 SVG를 사용하는 것이 좋습니다.

구현:

아래 테두리가 있는 컨테이너 div를 만드는 것부터 시작하세요. 컨테이너 내에 물결 모양에 대한 콘텐츠와 SVG를 배치합니다. SVG를 오른쪽으로 띄우세요.

SVG 디자인:

경로를 사용하여 파도 모양을 만들어 모양을 정의하고 흰색으로 채웁니다. 그런 다음, 획 속성을 사용하고 채우기를 투명으로 설정하여 테두리를 정의하기 위해 약간 오프셋된 다른 경로를 만듭니다.

최종 실행:

SVG가 컨테이너를 살짝 기울여 경계가 있는 파도 모양의 환상을 만듭니다. 원하는 디자인에 맞게 필요에 따라 SVG의 크기와 위치를 조정합니다.

예제 코드:

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

<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>

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