Bagaimanakah Saya Boleh Membuat Potongan Separuh Bulatan Lutsinar dalam Div Hanya Menggunakan CSS3?

Membuat Potongan Separuh Bulatan Lutsinar dalam Div

Pernyataan Masalah:

Mencapai potongan bentuk separuh bulatan lutsinar dalam div menggunakan hanya CSS3, dengan kekangan bahawa semua elemen membentuk bentuk mestilah sama ada hitam atau lutsinar.

Penyelesaian:

Untuk mencipta bentuk yang diingini, kami menggunakan ::selepas pseudo-sifat CSS:

body {
  background: green;
}

.rect {
  height: 100px;
  width: 100px;
  background: rgba(0, 0, 0, 0.5);
  position: relative;
  margin-top: 100px;
  margin-left: 100px;
}

.circle {
  display: block;
  width: 100px;
  height: 50px;
  top: -50px;
  left: 0;
  overflow: hidden;
  position: absolute;
}

.circle::after {
  content: '';
  width: 100px;
  height: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0);
  position: absolute;
  top: -100px;
  left: -40px;
  border: 40px solid rgba(0, 0, 0, 0.5);
}

HTML:

<div class="rect">
  <span class="circle"></span>
</div>

Penyelesaian ini mencipta segi tiga sama sisi yang mengandungi bulatan yang dipicit ke atas supaya persilangan membentuk bentuk separuh bulatan. Dengan menetapkan sifat latar belakang kepada hitam atau lutsinar, kami mencapai kesan yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Potongan Separuh Bulatan Lutsinar dalam Div Hanya Menggunakan CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!