Bagaimanakah Saya Boleh Mencipta Bentuk Lengkung Lutsinar dengan Dua Sisi Bulat Menggunakan CSS atau SVG?

Mencipta Bentuk Lengkung Lutsinar dengan Dua Sisi Bulat menggunakan CSS

Dalam percubaan anda untuk mencipta bentuk melengkung dalaman yang telus, anda menghadapi kesukaran untuk mencapai ketelusan yang dikehendaki. Soalan ini menyerlahkan keperluan untuk memahami teknik penciptaan bentuk melengkung telus dalam CSS.

Penyelesaian Menggunakan Kecerunan Jejari

Satu pendekatan untuk mencipta bentuk ini melibatkan penggunaan kecerunan jejari CSS. Dengan mentakrifkan dua kecerunan jejari dan meletakkannya secara strategik, anda boleh mencipta kesan bentuk melengkung dengan sisi bulat:

.box {
  margin-top:120px;
  width:200px;
  height:100px;
  background:white;
}
.box .top {
  height:100px;
  width:150px;
  transform:translateY(-100%);
  position:relative;
  background:#fff;
}

.top:before,
.top:after{
  content:"";
  position:absolute;
  top:0;
  width:50px;
  left:100%;
  bottom:50%;
  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;
  background-size:50% 100%;
  background-repeat:no-repeat;
}

.top:after {
  transform-origin:bottom;
  transform:scaleY(-1);
}

Dalam kod ini, dua elemen pseudo :sebelum dan :selepas dicipta untuk membentuk sisi bulat bentuk. Kecerunan jejari membenarkan peralihan beransur-ansur antara kawasan lutsinar dan tidak lutsinar, mewujudkan ilusi bentuk melengkung.

Penyelesaian Alternatif Menggunakan SVG

Sebagai alternatif, anda boleh gunakan SVG (Grafik Vektor Boleh Skala) untuk menentukan lengkung bentuk:

<svg width="200" height="100" viewBox="0 0 200 100">
  <defs>
    <mask>

Dalam kod SVG ini, laluan ditakrifkan untuk mencipta bentuk dan topeng digunakan pada segi empat tepat untuk mendedahkan bahagian bentuk yang dikehendaki sahaja.

Kesimpulan

Dengan memanfaatkan kecerunan jejari CSS atau SVG, anda boleh mencapai lengkung dalaman telus yang diingini bentuk dengan dua sisi bulat. Pilihan antara pendekatan ini bergantung pada kaedah pilihan anda dan kerumitan reka bentuk anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Bentuk Lengkung Lutsinar dengan Dua Sisi Bulat Menggunakan CSS atau SVG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!