Bagaimanakah Saya Boleh Mencipta Bentuk Bergelombang Hanya Menggunakan CSS dan SVG?

Bentuk Beralun dengan CSS

Mencipta bentuk beralun dengan CSS boleh dicapai menggunakan gabungan sifat CSS3 dan SVG. Berikut ialah pecahan cara melakukannya:

1. Cipta Bekas

Sisipkan elemen SVG dalam div bekas untuk mengawal saiz bentuk dan mengekalkan nisbah bidangnya. Tambahkan CSS berikut:

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

2. Tambahkan Elemen SVG

Di dalam bekas, masukkan elemen SVG dengan viewBox dan preserveAspectRatio sifat untuk mewujudkan dimensi bentuk dan mengekalkan bentuknya.

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

Definisi laluan menggunakan lengkung bezier padu untuk mencipta bentuk beralun. Sifat strok dan isian mengawal garis besar bentuk dan warna, masing-masing.

3. Letakkan SVG

Tetapkan elemen SVG untuk diletakkan secara mutlak dalam bekas.

svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

Dengan melaraskan dimensi dan nilai bekas dan elemen SVG, anda boleh menyesuaikan saiz dan bentuk elemen beralun seperti yang dikehendaki.

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