테두리가 있는 CSS3 물결 모양을 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

테두리가 있는 CSS3 물결 모양을 만드는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-11-17 13:49:02

원래의

258명이 탐색했습니다.

How to Create a CSS3 Wave Shape with a Border?

테두리가 있는 CSS3 물결 모양

이 쿼리에서 사용자는 CSS3를 사용하여 테두리가 있는 물결 모양을 만들고자 합니다. CSS3 Shapes를 사용하려고 시도했지만 어려움에 직면했습니다.

이 문제를 해결하기 위해 CSS3 Shapes는 테두리를 생성하도록 설계되지 않았기 때문에 가장 적합한 솔루션이 아닐 수 있습니다. 대신, 더 효과적인 접근 방식은 SVG(Scalable Vector Graphics)를 사용하는 것입니다.

SVG를 사용하는 솔루션:

".panel" div 요소를 SVG 요소로 바꾸세요. . 파도의 모양을 정의하려면 "경로" 요소를 사용하세요. 배경색을 설정하려면 "fill" 속성을 지정하고 테두리를 생성하려면 "Stroke" 속성을 지정합니다. SVG 요소를 오른쪽에 띄워 적절하게 정렬합니다.

다음은 HTML 및 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>

로그인 후 복사

이 접근 방식을 사용하면 채우기 색상과 테두리를 독립적으로 제어할 수 있습니다. 원하는 웨이브 모양에 테두리를 넣어주세요.

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