Div dengan potongan separuh bulatan lutsinar

Question

Saya mahu membuat bentuk separuh bulatan yang dipotong lutsinar menggunakan CSS3 sahaja. Satu-satunya syarat ialah semua elemen yang membentuk bentuk mestilah hitam atau lutsinar .

Saya tidak boleh menggunakan segi empat tepat hitam dengan bulatan putih di atasnya kerana separuh bulatan itu perlu telus dan biarkan latar belakang kelihatan melalui.

Bentuk yang diperlukan:

Answer 1

Anda boleh menggunakan bayang kotak untuk membuat bulatan keratan telus:

body {
  background: url(http://i.imgur.com/qi5FGET.jpg) no-repeat;
  background-size: cover;
}
div {
  display: inline-block;
  width: 300px; height: 300px;
  position: relative;
  overflow: hidden;
}
div:before {
  content: '';
  position: absolute;
  bottom: 50%;
  width: 100%; height: 100%;
  border-radius: 100%;
  box-shadow: 0px 300px 0px 300px #000;
}
.transparent {
  opacity: 0.5;
}

Ini boleh menjadi responsif dengan peratusan panjang:

body {
  background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg) no-repeat;
  background-size: cover;
}
div {
  width: 40%; height: 300px;
  position: relative;
  overflow: hidden;
}
div:before {
  content: '';
  position: absolute;
  bottom: 50%;
  width: 100%; height: 100%;
  border-radius: 100%;
  box-shadow: 0px 300px 0px 300px #000;
}
.transparent {
  opacity: 0.5;
}

Answer 2

Mungkin anda boleh melakukan ini menggunakan CSS ::after pseudo-properties seperti ini:

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