Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Mencipta Div Melengkung dengan Bahagian Atas Lutsinar Menggunakan Laluan Klip?

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

Susan Sarandon
Lepaskan: 2024-11-24 13:59:16
asal
1054 orang telah melayarinya

How Can I Create a Curved Div with a Transparent Top Using Clip Paths?

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;
}
Salin selepas log masuk
<div class="first">
  <div class="top">
  </div>
  <div class="bottom">
  </div>
</div>

<div class="second">
  <div class="top">
  </div>
  <div class="bottom">
  </div>
</div>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan