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

Sisi Bulat Tidak Sekata pada Div: Mencapai Asimetri dengan CSS

Mencipta sisi bulat tidak sekata pada div memerlukan pendekatan yang berbeza daripada menggunakan jejari sempadan. Walaupun jejari sempadan mendayakan kelengkungan yang sama pada semua sisi, kami akan meneroka penyelesaian alternatif yang memberikan kawalan yang lebih halus ke atas bentuk.

Memperkenalkan laluan klip, sifat CSS yang memberi kuasa kepada anda untuk memotong bentuk elemen mengikut parameter tertentu. Sifat ini beroperasi dengan melukis bentuk geometri di sekeliling elemen, menutup mana-mana bahagian yang terletak di luar bentuk yang ditentukan dengan berkesan.

Contoh Kod

Kod berikut menunjukkan cara mencipta div dengan sisi bulat yang tidak rata menggunakan clip-path:

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

<div class="box">

</div>

Penjelasan

Dalam CSS kod:

• bulatan(75% pada 65% 10%) mentakrifkan bentuk sebagai bulatan dengan jejari 75% ketinggian dan lebar div.
• Kata kunci at menentukan kedudukan pusat bulatan sebagai 65% dari kiri dan 10% dari bawah.
• Ini mewujudkan bulatan yang hanya sebahagiannya bertindih div, menghasilkan sisi bulat asimetri yang diingini.

Penyelesaian ini memberikan fleksibiliti yang lebih besar dan membolehkan anda mencipta pelbagai bentuk bukan simetri untuk div anda.

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