Bagaimana untuk Mencipta Bentuk Lengkung Lutsinar dengan Sisi Bulat dalam CSS?

Cara Membuat Bentuk Lengkung Lutsinar dengan Sisi Bulat Menggunakan CSS

Dalam pembangunan web, mencipta elemen yang menarik secara visual dan berfungsi adalah penting. Bentuk yang biasa digunakan dalam menu dan elemen UI lain ialah bentuk melengkung dengan dua sisi bulat. Walau bagaimanapun, untuk mencapai bentuk lutsinar ini boleh mencabar.

Cabaran

Anda sedang cuba mencipta bentuk melengkung dalaman yang lutsinar, tetapi anda menghadapi kesukaran untuk menghasilkan bentuk yang jelas. latar belakang. Bentuk yang anda sasarkan menyerupai imej yang ditunjukkan dalam https://i.sstatic.net/LFEA9.png.

Penyelesaian Sebelumnya

Pada mulanya, anda mencuba menggunakan CSS untuk mencipta bentuk, tetapi latar belakang kekal legap, mengaburkan kandungan halaman asas. Berikut ialah kod yang anda gunakan:

.tab-indicator {
  background-color: #000000;
  border-radius: 50px 0 0 50px;
  ...
}

Penyelesaian Diperbaiki

Untuk mencipta bentuk melengkung lutsinar dengan sisi bulat, anda boleh menggunakan penyelesaian dikemas kini yang disediakan melalui https:/ /css-shape.com/inner-curve/. Penyelesaian ini menawarkan penjana CSS boleh disesuaikan yang membolehkan anda memperhalusi pelbagai parameter dan menjana bentuk yang diingini.

Pendekatan Alternatif

Pendekatan lain melibatkan penggunaan kecerunan jejari untuk mencapai kesan yang sama:

.top:before,
.top:after {
  background:
    radial-gradient(100% 50% at top left, #fff 98%,transparent 100%) right,
    radial-gradient(100% 50% at bottom right, transparent 98%,#fff 100%) left;
  ...
}

Teknik ini menghasilkan kecerunan jejari yang bersilang, mencipta ilusi bentuk melengkung lutsinar.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Bentuk Lengkung Lutsinar dengan Sisi Bulat dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!