Bagaimanakah Saya Boleh Mencipta Sudut Bulat Tidak Sekata pada Div?

Mencipta Sisi Bulat Tidak Sekata pada Div

Cabaran: Reka bentuk DIV dengan sisi bulat tidak sekata berikut:

[Imej DIV dengan bulat tidak rata sisi]

Penyelesaian Semasa:

Menggunakan jejari sempadan, anggaran terdekat ialah:

border-bottom-left-radius: 80% 50px;
border-bottom-right-radius: 30% 30px;

Tetapi ini menghasilkan sudut bulat yang juga seragam.

Penyelesaian:

Clip-Laluan ke Penyelamat:

Untuk mencipta sisi bulat tidak sekata yang diingini, pertimbangkan menggunakan sifat clip-path, yang membolehkan untuk mentakrifkan bentuk geometri yang menjepit kandungan an elemen:

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

Dalam kod ini:

• 75% mentakrifkan jejari bulatan.
• pada 65% 10% menentukan titik tengah bagi bulatan berbanding bekas elemen.

HTML Kod:

<div class="box">
</div>

Sifat laluan klip akan mencipta sisi bulat tidak rata yang diingini, memberikan kefleksibelan untuk menyesuaikan bentuk dengan keperluan khusus anda.

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