SOURCE

var div = document.getElementById("chessboard");
let value = 50
div.setAttribute("style",`--w:${Math.min(value++,50)}px`);
function a(){
    value = 20
    setInterval(()=>{
        div.setAttribute("style",`--w:${Math.min(value++,50)}px`);
    },100)
}
// a()

console.log("棋盘创建完毕")
const pieceAll = [
    {type:'车',posi:[[0,0],[8,0]]},
    {type:'马',posi:[[1,0],[7,0]]},
    {type:'相',posi:[[2,0],[6,0]]},
    {type:'士',posi:[[3,0],[5,0]]},
    {type:'将',posi:[[4,0]]},
    {type:'炮',posi:[[1,2],[7,2]]},
    {type:'兵',posi:[[0,3],[2,3],[4,3],[6,3],[8,3]]}
];
const posiStr = function(p){
    let [x,y] = p;
    return `--x:${x*(value-1)}px;--y:${y*(value-1)}px`
}

const reflect = function(p){
    let [x,y] = p;
    return posiStr([x,9-y])
}

let pieceAll_dom = document.getElementById("pieceAll");

function player(group=0){
    let player = new Object;
    player.group = group;
    player.toName = function(type){
        // 車馬炮像相士仕將帥兵卒
        let names = {'车':['車','俥'],'马':['马','馬'],'相':['象','相'],'士':['士','仕'],'将':['將','帥'],
            '炮':['炮','炮'],'兵':['兵','卒']}
        return names[type][this.group];
    }
    return player;
}


let playerAll = [];
playerAll.push(new player(),new player(1));
console.log(playerAll)
playerAll.forEach(user=>{
    pieceAll.forEach(item=>{
        let posi = item.posi
        posi.forEach(p=>{
            let newPiece = document.createElement("div")
            let name = user.toName(item.type);
            let cla = user.group ? 'piece red' : 'piece';
            let posi = user.group ? reflect(p) : posiStr(p)
            newPiece.setAttribute("data-name",name);
            newPiece.setAttribute('class',cla);
            newPiece.setAttribute("style",posi);
            pieceAll_dom.appendChild(newPiece);
            newPiece.onclick = function(e,newPiece,cla){
                console.log(e,newPiece,this,event,cla)
            }
        })
    })
})
console.log("棋子布置完毕")

<div style="position: relative;height: max-content;width: max-content;margin: auto;">
    <div id="chessboard" class="half" data-title="楚 河　　　　　汉 界" style="--w:50px"></div>
    <div id="pieceAll">
    </div>
</div>

:root{
    --c:#fff;

}
body{
    height: 100vh;
    display: flex;
    background: var(--c);
}
#chessboard {
    --w:var(--w,50px);
    --w4:calc(var(--w)*4);
    --w5:calc(var(--w)*5);
    --w2:calc(var(--w)*2);
    --w3:calc(var(--w)*3);
    --x:calc(var(--w)*1.44);
    --xm:calc(var(--x)*2/21);
    width: calc(var(--w)*8 + 1px);
    height: calc(var(--w)*9 + 1px);
    display:flex;justify-content:center;align-items:center;
}
#chessboard::after {
    content: attr(data-title);
    background:var(--c);
    line-height: 110%;
    font-size: calc(var(--w)/50*28);
    text-align: center;
}
.half {
    background:
        repeating-linear-gradient(#000, #000 1px, transparent 1px, transparent var(--w)),
        repeating-linear-gradient(90deg, #000, #000 1px, transparent 1px, transparent var(--w)),
        repeating-linear-gradient(90deg, #000, #000 1px, transparent 1px, transparent calc(100% - 1px)),
        repeating-linear-gradient(to left bottom,transparent,transparent var(--xm),var(--c) var(--xm),var(--c) calc(var(--xm)*2)),
        linear-gradient(to right bottom,transparent calc(var(--x) - 2px),#333 var(--x), transparent calc(var(--x) - 2px)),
        repeating-linear-gradient(to right bottom,transparent,transparent var(--xm),var(--c) var(--xm),var(--c) calc(var(--xm)*2)),
        linear-gradient(to left bottom,transparent calc(var(--x) - 2px),#333 var(--x), transparent calc(var(--x) - 2px)),
        repeating-linear-gradient(to left bottom,transparent,transparent var(--xm),var(--c) var(--xm),var(--c) calc(var(--xm)*2));
        /* repeating-linear-gradient(0deg, transparent 0, transparent 5px, #000 5px, #000 10px); */
    background-repeat: no-repeat;
    background-size:100% 50%, 100% var(--w4),100% var(--w5),
        var(--w2) var(--w2),var(--w2) var(--w2),
        var(--w2) var(--w2),var(--w2) var(--w2);
    background-position: 0 0, 0 0, 0 0,
        var(--w3) 0,var(--w3) 0,var(--w3) 0,var(--w3) 0;
    outline: 1px solid #000;
    outline-offset: 5px;
    position: relative;
    -webkit-box-reflect: below -100%;   
}
#chessboard::before {
    --l:calc(var(--w)/5);
    --left:calc(var(--l)*-1.5 + 1px);
    --l1:calc(var(--l));
    --l2:calc(var(--l)*2);
    --l3:calc(var(--l)*3);
    --l4:calc(var(--l)*4);
    --w2:calc(var(--w)*2);
    --w3:calc(var(--w)*3);
    --w6:calc(var(--w)*6);
    --lb:calc(var(--l)/2);
    --lt1:calc(var(--w2) - var(--lb));
    --lt1e:calc(var(--w2) + var(--lb));
    --lt2:calc(var(--w3) - var(--lb));
    --lt2e:calc(var(--w3) + var(--lb));
    content:  '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(to right,#000, #000 var(--l1), transparent var(--l1), transparent var(--w6)),
        repeating-linear-gradient(to right, #000, #000 1px, transparent 1px, transparent var(--w6)),
        repeating-linear-gradient(to right,#000, #000 var(--l1), transparent var(--l1), transparent var(--w6)),
        repeating-linear-gradient(to right, #000, #000 1px, transparent 1px, transparent var(--w6)),
        repeating-linear-gradient(to right,#000, #000 var(--l1), transparent var(--l1), transparent var(--w2)),
        repeating-linear-gradient(to right, #000, #000 1px, transparent 1px, transparent var(--w2)),
        repeating-linear-gradient(to right,#000, #000 var(--l1), transparent var(--l1), transparent var(--w2)),
        repeating-linear-gradient(to right, #000, #000 1px, transparent 1px, transparent var(--w2));
    background-repeat: no-repeat;
    background-position: 
        calc(var(--w) + var(--left)) var(--lt1),calc(var(--w) - var(--lb)) calc(var(--lt1) - var(--l)),
        calc(var(--w) + var(--left)) var(--lt1e),calc(var(--w) - var(--lb)) calc(var(--lt1e)),
        var(--left) var(--lt2),var(--lb) calc(var(--lt2) - var(--l)),
        var(--left) var(--lt2e),var(--lb) calc(var(--lt2e));
    background-size: 
        calc(100% - var(--left)) 1px, calc(100% - var(--left)) var(--l),
        calc(100% - var(--left)) 1px, calc(100% - var(--left)) var(--l),
        calc(100% - var(--left)) 1px, calc(100% - var(--left)) var(--l),
        calc(100% - var(--left)) 1px, calc(100% - var(--left)) var(--l);
    -webkit-box-reflect: right -100%
}

pieceAll{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
.piece{
    --c: #461600;
    width: 40px;
    height: 40px;
    position: absolute;
    top:calc(var(--y,0px) - 20px);
    left: calc(var(--x,0px) - 20px);
    border-radius: 100%;
    box-shadow: 2px 2px 4px 1px #999;
    display:flex;justify-content:center;align-items:center;
    font-size: 28px;
    font-weight: bold;
    font-family: cursive;
    color:transparent;
    background: radial-gradient(#ffefe0,#ffd0a3 55%,#b32400 90%,#000 1%);
    transition: all 0.05s
}
.piece:hover{
    transform: scale(1.3)
}
.piece::after{
    content: attr(data-name);
    position: absolute;
    background:black;
    -webkit-background-clip: text;  
    margin-left: 1px;
}
.piece.red::after{
    background: 
        linear-gradient(to bottom,#6e0000,#6e0000 2%,transparent 20%,transparent 86%,#ff7a2a 96%), 
        linear-gradient(to right,#6e0000,#6e0000 2%,#e10000  20%,#e10000  86%,#ff7a2a 96%);
    -webkit-background-clip: text;  
}
.piece.red::before{
    content: attr(data-name);
    position: absolute;
    text-shadow: -0.5px -0.5px 0px var(--c),-1px -1px 0px var(--c),-1.5px -1px 0px var(--c);
    margin-left: 1px;
}