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.