CSS で QR コードスキャンボックスを実装するためのサンプルコード

<div class="img-box">
    <img class="code" src="https://image-static.segmentfault.com/149/570/149570997-5b987cc928d69_articlex">
</div>

.img-ボックス{
  背景: linear-gradient(#ae0000, #ae0000) 左上、
    linear-gradient(#ae0000, #ae0000) 左上、
    linear-gradient(#ae0000, #ae0000) 右上、
    linear-gradient(#ae0000, #ae0000) 右上、
    linear-gradient(#ae0000, #ae0000) 右下、
    linear-gradient(#ae0000, #ae0000) 右下、
    linear-gradient(#ae0000, #ae0000) 左下、
    linear-gradient(#ae0000, #ae0000) 左下;
  背景繰り返し: 繰り返しなし;
  背景サイズ: 2px 20px、20px 2px;
  高さ: 116px;
  幅: 116ピクセル;
}        
.コード {
    高さ: 110px;
    幅: 110ピクセル;
    上マージン: 2px;
    左マージン:2px;
    境界線: 1px 実線 #ae0000;
}