Bagaimanakah Saya Boleh Mencipta DIV Melengkung, Lutsinar Menggunakan Laluan Klip?

Mencipta DIV Melengkung dengan Bahagian Atas Lutsinar

Anda tidak sabar-sabar untuk memasukkan DIV telus dengan lebar dan ketinggian yang besar ke dalam kerja anda, menggunakan sempadan untuk mencapai lengkung yang unik bentuk. Penampilan yang diingini ditunjukkan oleh bentuk kuning dalam imej yang anda berikan.

Untuk mencapai kesan ini, pertimbangkan untuk memasukkan laluan klip, penyelesaian inovatif yang membolehkan anda menyesuaikan bentuk dengan tepat. Laluan klip menggunakan kawalan ke atas bahagian unsur yang boleh dilihat, memperkasakan anda untuk menentukan bentuk rumit yang digabungkan dengan lancar dengan elemen sekeliling.

Laluan klip boleh digunakan pada sama ada lapisan atas atau bawah. Untuk menggambarkan, mari kita pertimbangkan senario di mana kedua-dua elemen dipaparkan sebagai blok sebaris dan diletakkan bersebelahan.

Untuk lapisan atas, kami akan menggunakan bulatan sebagai nilai laluan klip, menghasilkan potongan bulat dengan berkesan. Dimensi dan imej latar belakang dikonfigurasikan dengan sewajarnya.

.top {
  clip-path: circle(72.9% at 50% 27%);
  height: 200px;
  width: 200px;
  background: url(image.jpg) center/cover;
}

Lapisan bawah diletakkan supaya ia bertindih sebahagiannya dengan lapisan atas, mewujudkan ilusi kelengkungan. Laluan klipnya ditakrifkan menggunakan bentuk poligon yang lebih kompleks, menghasilkan lengkung yang diingini.

.bottom {
  clip-path: polygon(0 25%, 14% 41%, 28% 51%, 49% 54%, 66% 53%, 79% 48%, 89% 39%, 100% 27%, 100% 100%, 47% 100%, 0% 100%);
  margin-top: -70px;
  height: 100px;
  width: 200px;
  background: yellow;
}

Pendekatan ini membolehkan kawalan tepat ke atas bentuk melengkung, memperkasakan anda untuk menyesuaikannya dengan keperluan khusus anda. Eksperimen dengan pelbagai nilai laluan klip untuk mencapai kelengkungan yang sempurna dan mencapai kesan visual yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta DIV Melengkung, Lutsinar Menggunakan Laluan Klip?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!