:root {
    --black--: #000;
    --white--: #fff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    width: 100%;
    height: 100%;
}

.chess {
    margin: 4vh auto;
    position: relative;
    max-width: 361px;
    width: 100%;
    height: 407px;
    outline: 1px solid var(--black--);
    outline-offset: 5px;
    background:
        /* 挡住中间的网格 */
        linear-gradient(var(--white--), var(--white--)),
        /* 网格布局 */
        repeating-linear-gradient(var(--black--), var(--black--) 1px, transparent 1px, transparent 45px),
        repeating-linear-gradient(90deg, var(--black--), var(--black--) 1px, transparent 1px, transparent 45px),
        /* 最上层的虚线 */
        repeating-linear-gradient(-45deg, transparent 0, transparent 5px, var(--white--) 5px, var(--white--) 10px),
        linear-gradient(45deg, transparent, transparent calc(50% - 0.5px), var(--black--) calc(50% - 0.5px), var(--black--) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent 0),
        repeating-linear-gradient(45deg, transparent 0, transparent 5px, var(--white--) 5px, var(--white--) 10px),
        linear-gradient(-45deg, transparent, transparent calc(50% - 0.5px), var(--black--) calc(50% - 0.5px), var(--black--) calc(50% + 0.5px), transparent calc(50% + 0.5px),
            transparent 0),
        repeating-linear-gradient(-45deg, transparent 0, transparent 5px, var(--white--) 5px, var(--white--) 10px),
        /* 最下层的虚线 */
        linear-gradient(45deg, transparent,
            transparent calc(50% - 0.5px),
            var(--black--) calc(50% - 0.5px),
            var(--black--) calc(50% + 0.5px),
            transparent calc(50% + 0.5px),
            transparent 0),
        repeating-linear-gradient(45deg, transparent 0, transparent 5px, var(--white--) 5px, var(--white--) 10px),
        linear-gradient(-45deg, transparent,
            transparent calc(50% - 0.5px),
            var(--black--) calc(50% - 0.5px),
            var(--black--) calc(50% + 0.5px),
            transparent calc(50% + 0.5px),
            transparent 0);
    background-repeat: no-repeat;
    background-size:
        calc(100% - 2px) 44px, 100% 100%, 100% 100%,
        /* 交叉虚线1 */
        90px 90px, 90px 90px, 90px 90px, 90px 90px,
        /* 交叉虚线2 */
        90px 90px, 90px 90px, 90px 90px, 90px 90px;
    background-position:
        1px 181px, 0 0, 0 0,
        /* 交叉虚线1 */
        136px 0, 136px 0, 136px 0, 136px 0,
        136px 315px, 136px 315px, 136px 315px, 136px 315px;
    line-height: 401px;
    text-align: center;
    font-size: 24px;
    letter-spacing: 12px;
    white-space: pre-wrap;
}

.chess::after,
.chess::before {
    content: "";
    position: absolute;
    background-color: var(--black--);
}

.chess::before {
    top: 85px;
    left: 30px;
    width: 10px;
    height: 1px;
    box-shadow: 20px 0, 270px 0, 290px 0, 0 10px,
        20px 10px, 270px 10px, 290px 10px, -25px 45px,
        -25px 55px, 315px 45px, 315px 55px,
        45px 45px, 65px 45px, 45px 55px, 65px 55px,
        135px 45px, 155px 45px, 155px 55px, 135px 55px,
        225px 45px, 245px 45px, 225px 55px, 245px 55px;
    -webkit-box-reflect: below 235px;
}

.chess::after {
    top: 75px;
    left: 40px;
    width: 1px;
    height: 10px;
    box-shadow: 10px 0, 270px 0, 280px 0, 0 20px,
        10px 20px, 270px 20px, 280px 20px, -35px 45px,
        -35px 65px, 315px 45px, 315px 65px,
        45px 45px, 55px 45px, 45px 65px, 55px 65px,
        135px 45px, 145px 45px, 135px 65px, 145px 65px,
        225px 45px, 225px 65px, 235px 45px, 235px 65px;
    -webkit-box-reflect: below 236px;
}