Bagaimanakah Saya Boleh Mencipta Div dengan Sudut Bulat Tidak Sekata Menggunakan CSS?

Mencipta Div dengan Sisi Bulat Tidak Sekata

Semasa menggunakan jejari sempadan boleh memberikan sudut bulat pada div, untuk mencapai sisi tidak sekata memerlukan pendekatan yang berbeza . Satu penyelesaian yang berkesan ialah menggunakan sifat clip-path.

Menggunakan clip-path

clip-path membolehkan anda memotong bentuk tertentu daripada elemen, menyembunyikan dengan berkesan kawasan yang berlebihan. Untuk membuat sisi bulat yang tidak sekata, gunakan bentuk bulatan dengan mengimbangi tengahnya dari tepi div. Contohnya:

.box {
  height: 200px;
  width: 200px;
  background: blue;
  clip-path: circle(75% at 65% 10%);
}

Kod CSS ini mentakrifkan "kotak" dengan sisi bulat yang tidak rata:

• Bentuk bulatan mempunyai jejari 75%, tetapi pusatnya diimbangi 65 % secara mendatar dan 10% secara menegak dari sudut kiri atas div.
• Latar belakang "biru" mengisi keseluruhan div, tetapi hanya kawasan dalam bentuk bulatan yang kelihatan.

Dengan memanipulasi nilai circle(), anda boleh memperhalusi bentuk dan kedudukan sudut bulat. Pendekatan ini menyediakan kaedah yang fleksibel untuk mencipta sisi bulat tersuai pada div, membolehkan anda mencapai reka bentuk seperti contoh yang anda berikan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Div dengan Sudut Bulat Tidak Sekata Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!