Rumah  >  Soal Jawab  >  teks badan

Div dengan potongan separuh bulatan lutsinar

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:

P粉022285768P粉022285768383 hari yang lalu727

membalas semua(2)saya akan balas

  • P粉138871485

    P粉1388714852023-10-23 14:34:32

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

    balas
    0
  • P粉851401475

    P粉8514014752023-10-23 09:09:07

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

    balas
    0
  • Batalbalas