Bagaimana untuk Mencipta Bentuk Gelombang dengan Sempadan Menggunakan CSS3 dan SVG?

Mencipta Bentuk Gelombang dengan Sempadan dalam CSS3

Apabila cuba mereka bentuk bentuk gelombang dengan CSS3 menggunakan Bentuk, hasil yang diingini mungkin tidak boleh dicapai kerana batasan tetapan warna sempadan dan latar belakang. Untuk mengatasinya, pertimbangkan untuk menggunakan SVG dan bukannya div untuk bentuk gelombang.

Pelaksanaan:

Mulakan dengan mencipta div bekas dengan sempadan bawah. Di dalam bekas, letakkan kandungan dan SVG untuk bentuk gelombang. Terapungkan SVG ke kanan.

Reka Bentuk SVG:

Cipta bentuk gelombang menggunakan laluan untuk menentukan bentuk dan isi dengan warna putih. Seterusnya, cipta laluan lain, sedikit diimbangi, untuk menentukan sempadan menggunakan sifat lejang dan menetapkan isian kepada lutsinar.

Pelaksanaan Akhir:

SVG akan bertindih dengan bekas sedikit, mencipta ilusi bentuk gelombang bersempadan. Laraskan dimensi dan kedudukan SVG mengikut keperluan agar sepadan dengan reka bentuk yang diingini.

Contoh Kod:

body {
  background: #007FC1;
}
.container {
  border-bottom: 4px solid #B4CAD8;
}
.container {
  background-color: #fff;
}
.container > .text {
  padding: 0.5em;
}
.panel {
  position: relative;
  float: right;
  margin-top: -4px;
}

<div class="container">
  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates nam fuga eligendi ipsum sed ducimus quia adipisci unde atque enim quasi quidem perspiciatis totam soluta tempora hic voluptatem optio perferendis.</p>
  </div>
</div>
<svg class="panel" width="200" height="54">
  <path d="M0,0 h7 q9,3 12.5,10 l13,30 q3.2,10 13,10 h157 v-50z" fill="white" />
  <path transform="translate(0, -0.5)" d="M0,2 h7 q10,2 13,10 l13,30 q3,9 13,10 h157" fill="none" stroke="#B4CAD8" stroke-width="4" />
  <text x="110.5" y="25" text-anchor="middle">This is a panel</text>
</svg>

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