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

Mencipta Bentuk Lengkung Lutsinar dengan Sisi Bulat dalam CSS

Penciptaan bentuk melengkung dalam CSS boleh mencabar, terutamanya apabila menyasarkan ketelusan. Artikel ini meneroka kaedah untuk mencapai perkara ini menggunakan CSS, menangani isu latar belakang tidak telus.

Cabaran:

Anda mungkin menghadapi senario yang anda mahu cipta bentuk melengkung telus serupa dengan yang digambarkan dalam imej yang disediakan. Walau bagaimanapun, pendekatan semasa anda menggunakan teknik CSS tradisional menghasilkan latar belakang legap, seperti yang dilihat dalam tangkapan skrin hasil.

Penyelesaian:

Untuk menyelesaikan isu ini, kami membentangkan penyelesaian yang melibatkan kecerunan jejari. Dengan menggunakan dua kecerunan jejari yang diposisikan secara strategik, kita boleh mencipta ilusi bentuk melengkung lutsinar dengan sisi bulat.

Pelaksanaan:

.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);
}

body {
  background:pink;
}

Dalam coretan kod ini , elemen '.atas' mewakili bentuk melengkung. Kecerunan jejari yang diletakkan sebelum dan selepas elemen ini mencipta sisi bulat dan ketelusan. Sifat 'transform: scaleY(-1)' membalikkan elemen pseudo selepas secara menegak, mewujudkan bentuk simetri.

Pelaksanaan yang Dipertingkat:

Untuk lebih ramai pengguna- cara mesra untuk melaraskan lengkung, pertimbangkan untuk menggunakan penyelesaian yang disediakan oleh https://css-shape.com/inner-curve/. Laman web ini membolehkan anda menyesuaikan pelbagai aspek bentuk lengkung, menjadikannya mudah untuk mencapai kesan yang diingini.

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