CSS : QR 카메라의 빈 상자 스타일 지정

Question

아래와 같이 QR 코드 스캔 기능과 인터페이스가있는 웹 사이트를 디자인 중입니다.

카메라가 켜지면 전체 화면이되고 카메라는 투명한 검정색 레이어로 덮여 있지만 중간에 QR 코드를 스캔 할 수있는 비 차폐 사각형이 있습니다.

나는이 HTML처럼 디자인했다 :

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

영어에 대한 동정심이 좋지 않아 사람들이 도와 주길 기대합니다!

감사합니다.

Answer 1

다음은 clip-path을 사용한 예입니다. 모양을 만들 때 this website을 사용했습니다.

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>

는 4 개 된 div를 사용하여 영역을 포함하는 것입니다 수있는 또 다른 방법 - 위, 아래, 왼쪽은 오른쪽 매우 정확하게 what this Expose jQuery plugin does.