Bagaimanakah Saya Boleh Mencipta Div Lutsinar Melengkung Menggunakan CSS?

Mencipta Div Lutsinar Melengkung dengan CSS

Dalam usaha anda untuk mereka bentuk div lutsinar dengan bentuk melengkung, anda menghadapi kesukaran untuk mencapai yang diingini kesan. Mari terokai cara untuk mengatasi cabaran ini dan mencipta bentuk melengkung yang anda cari.

Untuk mencipta bentuk melengkung, CSS menawarkan sifat laluan klip, yang membolehkan anda mentakrifkan bentuk elemen menggunakan pelbagai fungsi geometri. Anda boleh menggunakannya sama ada pada elemen atas atau elemen bawah, mencipta kesan tindanan.

Coretan kod berikut menunjukkan cara untuk mencapai bentuk yang diingini menggunakan laluan klip:

.first, .second {
  display: inline-block;
  margin: 5px;
}

/* For the first div */
.first .top {
  clip-path: circle(72.9% at 50% 27%);
  height: 200px;
  width: 200px;
  background: url(https://picsum.photos/id/10/800/800) center/cover;
  position: relative;
}

.first .bottom {
  margin-top: -70px;
  background: yellow;
  height: 100px;
  width: 200px;
}

/* For the second div */
.second .top {
  height: 200px;
  width: 200px;
  background: url(https://picsum.photos/id/10/800/800) center/cover;
  position: relative;
}

.second .bottom {
  clip-path: polygon(0 25%, 14% 41%, 28% 51%, 49% 54%, 66% 53%, 79% 48%, 89% 39%, 100% 27%, 100% 100%, 47% 100%, 0% 100%);
  margin-top: -70px;
  background: yellow;
  height: 100px;
  width: 200px;
}

Kod ini mencipta dua div, satu dengan bahagian atas bulat dan bahagian bawah kuning, dan satu lagi dengan bahagian atas poligon tersuai dan bahagian bawah kuning. Dengan melaraskan nilai laluan klip, anda boleh mencipta bentuk melengkung yang berbeza seperti yang dikehendaki.

Dengan menggunakan laluan klip, anda mempunyai kuasa untuk mereka bentuk bentuk melengkung yang menawan dan meningkatkan daya tarikan estetik tapak web atau aplikasi web anda.

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