CSS: Style eine leere Box für die QR-Kamera

Question

Ich entwerfe für eine Website, die QR-Code-Scan-Funktion und Schnittstelle wie folgt benötigt.

Wenn die Kamera eingeschaltet ist, wird sie im Vollbildmodus angezeigt, die Kamera ist von einer transparenten schwarzen Schicht bedeckt, aber in der Mitte befindet sich ein nicht abgeschirmtes Quadrat zum Scannen des QR-Codes.

Ich habe wie diese HTML entworfen:

<div class="videobox"> 
      <div class="shape-qr"></div> 
      <div class="videobox__inner"> 
       <video id="video" autoplay playsinline ></video> 
      </div> 
     </div> 

CSS:

.videobox, #video{ 
     text-align: center; 
     position: relative; 
     height: 100%; 
     width: 100%; 
    } 
    .videobox .shape-qr{ 
     background: rgba(0,0,0,0.5); 
     height: 100%; 
     width: 100%; 
     position: absolute; 
     top: 0; 
     left: 0; 
     right:0; 
     bottom: 0; 
    } 

Das Ergebnis war so, aber ich wusste nicht, wie die Kamera in einem quadratischen Raum zum Zentrum

Sympathie für Englisch ist nicht gut, erwarten, dass Menschen helfen!

Vielen Dank!

Answer 1

Hier ist ein Beispiel mit clip-path. Ich benutzte this website, um die Form zu machen.

img{ 
 
    width:500px; 
 
} 
 
.element{ 
 
    position:absolute; 
 
    top:0; 
 
    width:500px; 
 
    height:500px; 
 
    background:rgba(255,0,0,0.8) ; 
 
    
 
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%); 
 
    clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%); 
 
    
 
}

<img src="https://www.gallaslabel.com/assets/1/7/Wine_Bottle_-_QR_Code.jpg" /> 
 
<div class="element"> 
 
</div>

Ein anderer Weg, es zu tun ist, den Bereich unter Verwendung von 4 divs zu bedecken - oben, unten, links, rechts Das ist genau die what this Expose jQuery plugin does.