How to Make a Chess Board with just One Element

This might be a very nice puzzle. Very difficult to create a chess board with just one element. Even more, the grid pattern that everyone knows is not possible to be created only with one element.

Okay, I'll tell you the secret. Here I use multiple box-shadow to create every block, black and white. Very simple.

First, create an element:

<div></div>

Then add a multiple box shadow on the element that you created:

div {
  position:relative;
  width:50px;  /* box width */
  height:50px; /* box height */
  background:black;
  margin:30px 0px 450px 30px;
  box-shadow:
    50px 0px white, 100px 0px 0px black,
    150px 0px 0px white, 200px 0px 0px black,
    250px 0px 0px white, 300px 0px 0px black, 350px 0px 0px white,

    0px 50px 0px white, 50px 50px 0px black,
    100px 50px 0px white, 150px 50px 0px black,
    200px 50px 0px white, 250px 50px 0px black,
    300px 50px 0px white, 350px 50px 0px black,

    0px 100px 0px black, 50px 100px 0px white,
    100px 100px 0px black, 150px 100px 0px white,
    200px 100px 0px black, 250px 100px 0px white,
    300px 100px 0px black, 350px 100px 0px white,

    0px 150px 0px white, 50px 150px 0px black,
    100px 150px 0px white, 150px 150px 0px black,
    200px 150px 0px white, 250px 150px 0px black,
    300px 150px 0px white, 350px 150px 0px black,

    0px 200px 0px black, 50px 200px 0px white,
    100px 200px 0px black, 150px 200px 0px white,
    200px 200px 0px black, 250px 200px 0px white,
    300px 200px 0px black, 350px 200px 0px white,

    0px 250px 0px white, 50px 250px 0px black,
    100px 250px 0px white, 150px 250px 0px black,
    200px 250px 0px white, 250px 250px 0px black,
    300px 250px 0px white, 350px 250px 0px black,
/* ... etc... etc... */
}

Here's what look like:

Adding multiple box shadow on the element

Then, use a CSS Pseudo Element :before or :after to create the outer box. Set the width and height to 8 × block width:

div:before {
  content:"";
  width:400px;  /* 50px*8 */
  height:400px; /* 50px*8 */
  border:2px solid red;
  position:absolute;
  top:-2px;
  left:-2px;
}

Use CSS Pseudo Element to create the outer box

Complete your work with adding color, drop shadow and gradient effects. You have finished making your single element Chess Board. Wonderful!

Finished Work

div {
  position:relative;
  width:50px;
  height:50px;
  background:black;
  margin:30px 0px 450px 30px;
  box-shadow:
    50px 0px white, 100px 0px 0px black,
    150px 0px 0px white, 200px 0px 0px black,
    250px 0px 0px white, 300px 0px 0px black, 350px 0px 0px white,

    0px 50px 0px white, 50px 50px 0px black,
    100px 50px 0px white, 150px 50px 0px black,
    200px 50px 0px white, 250px 50px 0px black,
    300px 50px 0px white, 350px 50px 0px black,

    0px 100px 0px black, 50px 100px 0px white,
    100px 100px 0px black, 150px 100px 0px white,
    200px 100px 0px black, 250px 100px 0px white,
    300px 100px 0px black, 350px 100px 0px white,

    0px 150px 0px white, 50px 150px 0px black,
    100px 150px 0px white, 150px 150px 0px black,
    200px 150px 0px white, 250px 150px 0px black,
    300px 150px 0px white, 350px 150px 0px black,

    0px 200px 0px black, 50px 200px 0px white,
    100px 200px 0px black, 150px 200px 0px white,
    200px 200px 0px black, 250px 200px 0px white,
    300px 200px 0px black, 350px 200px 0px white,

    0px 250px 0px white, 50px 250px 0px black,
    100px 250px 0px white, 150px 250px 0px black,
    200px 250px 0px white, 250px 250px 0px black,
    300px 250px 0px white, 350px 250px 0px black,

    0px 300px 0px black, 50px 300px 0px white,
    100px 300px 0px black, 150px 300px 0px white,
    200px 300px 0px black, 250px 300px 0px white,
    300px 300px 0px black, 350px 300px 0px white,

    0px 350px 0px white, 50px 350px 0px black,
    100px 350px 0px white, 150px 350px 0px black,
    200px 350px 0px white, 250px 350px 0px black,
    300px 350px 0px white, 350px 350px 0px black;
}

div:before {
  content:"";
  width:400px;
  height:400px;
  border:2px solid #171508;
  position:absolute;
  top:-2px;
  left:-2px;
  box-shadow:inset 0px 0px 2px rgba(0,0,0,0.7), 0px 0px 0px 7px #4A4016, 2px 2px 7px 7px rgba(0,0,0,0.7);
  background-image:linear-gradient(-70deg, rgba(255,255,255,0.7) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1) 100%);
}

View Demo Download Files