Bagaimana untuk Mencipta Bentuk Bergelombang Responsif Menggunakan SVG dan CSS?

Menggunakan SVG dan CSS untuk Mencipta Bentuk Bergelombang

Soalan: Bagaimana saya boleh mencipta bentuk beralun menggunakan CSS, sama seperti imej yang disediakan ?

Jawapan:

Yang dikehendaki bentuk beralun boleh dicapai melalui gabungan SVG dan CSS. Berikut ialah pendekatan yang komprehensif:

Pertama, cipta elemen SVG dan tentukan laluan untuk gelombang. Laluan ini mengawal lengkung dan kontur bentuk. Dalam contoh di bawah, laluan membentuk gelombang dari titik (0, 100) ke titik (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"></path></svg>

Seterusnya, cipta elemen bekas untuk memegang SVG. Bekas ini akan memastikan bentuk gelombang kekal responsif.

<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"><p>Akhir sekali, gayakan bekas menggunakan CSS untuk menjadikannya responsif dan letakkan SVG. Dengan menetapkan bahagian bawah padding kontena kepada 100% dan kedudukan kepada relatif, anda boleh mengekalkan nisbah bidang SVG sambil mengisi ketinggian bekas yang tersedia:</p><pre class="brush:php;toolbar:false">.container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
}

Pendekatan ini memastikan bentuk gelombang SVG adalah responsif , mengekalkan bentuk yang diingini tanpa mengira dimensi bekas.