Maison  >  Questions et réponses  >  le corps du texte

Div avec découpe en demi-cercle transparent

Je souhaite créer une forme de demi-cercle découpée et transparente en utilisant uniquement CSS3. La seule exigence est que tous les éléments qui forment la forme doivent être noirs ou transparents .

Je ne peux pas utiliser un rectangle noir avec un cercle blanc dessus car le demi-cercle doit être transparent et laisser transparaître l'arrière-plan.

Forme requise :

P粉022285768P粉022285768384 Il y a quelques jours730

répondre à tous(2)je répondrai

  • P粉138871485

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

    Vous pouvez utiliser l'ombre de la boîte pour créer un cercle de détourage transparent :

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

    Cela peut être responsive avec une longueur en pourcentage :

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

    répondre
    0
  • P粉851401475

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

    Peut-être pouvez-vous le faire en utilisant des pseudo-propriétés CSS ::after comme celle-ci :

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

    répondre
    0
  • Annulerrépondre