Bagaimana untuk mencipta bentuk gelombang dengan sempadan menggunakan SVG dan CSS?

Mencipta Bentuk Gelombang dengan Sempadan dalam CSS3

Merancang bentuk gelombang dengan sempadan dalam CSS3 boleh mencabar. Melaksanakannya menggunakan Bentuk CSS3 mungkin tidak menghasilkan hasil yang diingini. Sebaliknya, gabungan kedudukan SVG dan CSS boleh mencapai kesan yang diingini.

Menggunakan SVG untuk Bentuk Gelombang

Daripada menggunakan elemen div untuk bentuk gelombang, elemen SVG boleh digunakan. Elemen laluan dalam SVG boleh digunakan untuk menentukan bentuk gelombang. Atribut isian boleh ditetapkan kepada putih untuk memberikan bentuk gelombang warna pepejal.

Menambah Sempadan pada Bentuk Gelombang

Untuk mencipta sempadan, elemen laluan lain boleh ditambah ke SVG. Laluan ini sepatutnya mempunyai bentuk yang sama dengan bentuk gelombang, tetapi ia mestilah lebih kecil sedikit. Atribut isian hendaklah ditetapkan kepada tiada dan atribut lejang dan lejang hendaklah digunakan untuk menentukan jidar.

Menempatkan Bentuk Gelombang

Elemen SVG boleh diletakkan menggunakan CSS. Sifat apungan boleh digunakan untuk mengapungkan SVG di sebelah kanan kandungan. Sifat atas margin boleh digunakan untuk meletakkan SVG di atas kandungan sedikit.

Kod Akhir

Kod berikut menunjukkan pelaksanaan bentuk gelombang dengan sempadan menggunakan SVG 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>

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

Pendekatan ini menggunakan SVG untuk mencipta bentuk gelombang tersuai dan kemudian melapiskan sempadan di atas ia menggunakan elemen laluan tambahan. Memposisikan bentuk gelombang menggunakan CSS melengkapkan hasil yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk mencipta bentuk gelombang dengan sempadan menggunakan SVG dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!