CSS：为 QR 相机设置一个空框的样式

Question

我正在设计一个具有二维码扫描功能的网站，所需的界面如下。

当相机打开时，它将是全屏的，相机被透明的黑色层覆盖，但中间是一个未屏蔽的方块，用于扫描二维码。

我设计了这样的 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。我用这个网站来制作形状。

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 覆盖该区域 - 上、下、左、右

这正是Expose jQuery 插件的作用。

编辑：还有这个用户border-width:10000px;。看起来很老套但有效。