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

结果是这样的，但是我不知道怎么把相机放在正方形的中心space

同情英文不好，望达人帮忙！

谢谢！

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.

编辑：还有 this one 那个用户 border-width:10000px;。看起来很老套，但确实有效。

CSS：为 QR 相机设计一个空框

CSS: Style an empty box for the QR camera

html

css

camera

qr-code