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

在 CSS3 中建立帶有邊框的波浪形狀

在 CSS3 中設計帶邊框的波浪形狀可能具有挑戰性。使用 CSS3 Shapes 實現它們可能不會產生預期的結果。相反，SVG 和 CSS 定位的組合可以達到預期的效果。

使用 SVG 表示波形

而不是使用 div 元素表示波形，可以使用 SVG 元素。 SVG 中的路徑元素可用來定義波浪的形狀。 fill 屬性可以設定為白色，為波形提供純色。

為波形新增邊框

要建立邊框，另一個路徑元素可以加入 SVG 中。此路徑的形狀應與波浪形狀相同，但應稍小。 fill 屬性應設為 none，並且描邊和描邊寬度屬性套用於定義邊框。

定位波形

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中文網其他相關文章！