Bagaimanakah Saya Boleh Mencipta Div Melengkung dengan Bahagian Atas Lutsinar Menggunakan Laluan Klip?

Mencipta Div Melengkung dengan Bahagian Atas Lutsinar

Dalam percubaan untuk mereka bentuk div lutsinar yang merangkumi keseluruhan lebar dan dengan ketinggian lebih kurang 500px, anda telah menghadapi cabaran dalam mencapai bentuk melengkung. Untuk mendapatkan bentuk yang diingini, seperti yang digambarkan dalam imej yang disediakan, gunakan pendekatan berikut:

Menggunakan Laluan Klip:

Laksanakan laluan klip sama ada pada elemen atas atau bawah dan pastikan ia bertindih seperti berikut:

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

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

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

<div class="first">
  <div class="top">
  </div>
  <div class="bottom">
  </div>
</div>

<div class="second">
  <div class="top">
  </div>
  <div class="bottom">
  </div>
</div>

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