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">

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">

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:

.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.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Bentuk Bergelombang Responsif Menggunakan SVG dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!