如何使用 SVG 和 CSS 建立響應式波浪形狀？

使用 SVG 和 CSS 建立波浪形狀

問題：如何使用 CSS 建立波浪形狀，類似於圖片提供了嗎？

答案：

可以透過SVG和CSS的組合來實現所需的波浪形狀。這是一個全面的方法：

首先，建立一個 SVG 元素並定義波浪的路徑。此路徑控制形狀的曲線和輪廓。在下面的範例中，路徑從點 (0, 100) 到點 (500, 100) 形成波浪：

<svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
  <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z">

接下來，建立一個容器元素來保存 SVG。此容器將確保波形保持響應性。

<div class="container">
  <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z">

最後，使用 CSS 設定容器樣式，使其回應並定位 SVG。將容器的padding-bottom 設為100% 並將位置設為相對，您可以在填充容器的可用高度時保留SVG 的縱橫比：

.container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
}

此方法可確保SVG 波形具有反應能力，無論容器尺寸如何，都能保持其所需的形狀。

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