<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 499px;
height: 500px;
display: fLex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
}
.box div {
position: relative;
background: url(./images/1.gif) no-repeat center;
width: 100px;
height: 100px;
background-size: 400px 400px;
}
.box div::after {
content: '';
background-color: #f6e58d;
position: absolute;
top: 8px;
right: -15px;
height: 100%;
width: 15px;
transform: skewY(45deg);
}
.box div::before {
content: '';
background-color: #f9ca24;
position: absolute;
bottom: -15px;
left: 8px;
height: 15px;
width: 100%;
transform: skewX(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="input-con">
<input class="code" type="text">
<input class="code" type="text">
<input class="code" type="text">
<input class="code" type="text">
<input class="code" type="text">
</div>
<script>
let el = document.getElementsByClassName("box")[0]
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 4; j++) {
const box = document.createElement('div')
box.style.backgroundPosition = `${-j * 100}px ${-i * 100}px`
el.appendChild(box)
}
}
</script>
</body>
</html>