Bagaimana untuk Mencipta Bentuk Gelombang CSS3 dengan Sempadan?

Bentuk Gelombang CSS3 dengan Sempadan

Dalam pertanyaan ini, pengguna ingin mencipta bentuk gelombang dengan sempadan menggunakan CSS3. Walaupun cuba menggunakan Bentuk CSS3, mereka menghadapi kesukaran.

Untuk menangani perkara ini, Bentuk CSS3 mungkin bukan penyelesaian yang paling sesuai, kerana ia tidak direka bentuk untuk membuat sempadan. Sebaliknya, pendekatan yang lebih berkesan ialah menggunakan SVG (Grafik Vektor Boleh Skala).

Penyelesaian menggunakan SVG:

Ganti elemen div ".panel" dengan elemen SVG . Gunakan elemen "laluan" untuk menentukan bentuk gelombang. Tentukan atribut "isi" untuk menetapkan warna latar belakang dan atribut "lejang" untuk mencipta sempadan. Terapungkan elemen SVG ke kanan untuk menjajarkannya dengan sewajarnya.

Berikut ialah contoh kod HTML dan CSS:

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

Pendekatan ini membolehkan anda mengawal warna isian dan jidar secara bebas, menghasilkan bentuk gelombang yang dikehendaki dengan sempadan.

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