Search code examples
htmlcsscameraqr-code

CSS: Style an empty box for the QR camera

I'm designing for a website that has QR Code scan function, and interface required as below.

When the camera is turned on, it will be full screen, the camera is covered by a transparent black layer, but in the middle is an unshielded square to scan the QR code.

enter image description here I have designed like this 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;
    }

The result was like this, but I did not know how to center the camera in a square space

enter image description here

Sympathy for English is not good, expect people to help!

Thank you!

Solution

  • Here's an example using clip-path. I used this website to make the shape.

    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>

    Another way to do it is to cover the area using 4 divs - top, bottom, left,right

    That's exactly what this Expose jQuery plugin does.

    Edit: There's also this one that user border-width:10000px;. Seems hacky but works.