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

Bentuk Gelombang dengan Sempadan Menggunakan CSS3 dan SVG

Melaksanakan bentuk gelombang dengan CSS3 boleh mencabar. Walaupun bentuk CSS3 menawarkan pelbagai jenis smöglichkeiten, ia gagal apabila menggunakan sempadan dan menetapkan warna latar belakang pada bentuk tidak sekata.

Untuk mencapai kesan "bentuk gelombang dengan sempadan" yang diingini, kita boleh memanfaatkan kuasa SVG (Grafik Vektor Boleh Skala). SVG menawarkan fleksibiliti dalam mentakrifkan bentuk yang kompleks dan boleh digayakan dengan mudah dengan CSS.

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

Meletakkan elemen SVG di sebelah kandungan utama dan menjajarkannya ke kanan memberikan ilusi bentuk gelombang dengan sempadan:

.panel {
  position: relative;
  float: right;
  margin-top: -4px;
}

Dengan menetapkan indeks-z div bekas kepada -1, kami memastikan elemen SVG kekal di atas kandungan dan mencipta kesan yang diingini.

Oleh itu, dengan menggabungkan fleksibiliti SVG dengan keupayaan penggayaan CSS, kita boleh mencapai kesan "bentuk gelombang dengan sempadan" dalam CSS3.

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!