Bagaimana Saya Boleh Membuat Bentuk Bergelombang Menggunakan CSS?

Mencipta Bentuk Beralun dengan CSS

Soalan:

Bagaimana saya boleh mencipta bentuk beralun suka imej ini menggunakan CSS?

[Imej Beralun Bentuk]

Percubaan Awal:

CSS ini mencipta garis lurus:

#wave {
  position: absolute;
  height: 70px;
  width: 600px;
  background: #e0efe3;
}

Jawapan:

Untuk mencapai bentuk beralun, kami boleh memanfaatkan laluan SVG. Dengan menggabungkan bekas dengan sifat responsif dan SVG dengan laluan melengkung, kami boleh mencipta kesan yang diingini:

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

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

Atas ialah kandungan terperinci Bagaimana Saya Boleh Membuat Bentuk Bergelombang Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!