如何使用 CSS3 和 SVG 建立帶有邊框的波浪形狀？

使用 CSS3 和 SVG 帶邊框的波浪形狀

使用 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- index 設定為-1，我們確保SVG 元素保持在內容上方並創建所需的效果。

因此，透過組合SVG 的靈活性結合 CSS 的樣式功能，我們可以在 CSS3 中實現「帶有邊框的波浪形狀」效果。

以上是如何使用 CSS3 和 SVG 建立帶有邊框的波浪形狀？的詳細內容。更多資訊請關注PHP中文網其他相關文章！