Chessboard with pieces using pure HTML and CSS


Chessboard using pure css and html
Chessboard using pure css and html

To create a Chessboard with Chess pieces we first need to know their Unicode or HTML equivalent codes.

There are around 12 Symbols that are needed to create a Chessboard in HTML.

These symbols are available in Unicode range U+2654 to U+265F.

⚡️ Note: To display these Symbols you need to have the font that supports this Unicode Range.

1. White Chess King ♔
Unicode : U+2654
HTML Code : ♔
2. Black Chess King ♚
Unicode : U+265A
HTML Code : ♚
3. White Chess Queen ♕
Unicode : U+2655
HTML Code : ♕
4. Black Chess Queen ♛
Unicode : U+265B
HTML Code : ♛
5. White Chess Rock ♖
Unicode : U+2656
HTML Code : ♖
6. Black Chess Rock ♜
Unicode : U+265C
HTML Code : ♜
7. White Chess Bishop ♗
Unicode : U+2657
HTML Code : ♗
8. Black Chess Bishop ♝
Unicode : U+265D
HTML Code : ♝
9. White Chess Knight ♘
Unicode : U+2658
HTML Code : ♘
10. Black Chess Knight ♞
Unicode : U+265E
HTML Code : ♞
11. White Chess Pawn ♙
Unicode : U+2659
HTML Code : ♙
12. Black Chess Pawn ♟
Unicode : U+265F
HTML Code : ♟
Source Code HTML + CSS
<html>

<head>
<meta charset="UTF-8"> 
<title>Chessboard using Pure CSS and HTML</title>

<style type="text/css">

.chessboard {
    width: 640px;
    height: 640px;
    margin: 20px;
    border: 25px solid #333;
}
.black {
    float: left;
    width: 80px;
    height: 80px;
    background-color: #999;
      font-size:50px;
    text-align:center;
    display: table-cell;
    vertical-align:middle;
}
.white {
    float: left;
    width: 80px;
    height: 80px;
    background-color: #fff;
    font-size:50px;
    text-align:center;
    display: table-cell;
    vertical-align:middle;
}

</style>

</head>

<body>

<div class="chessboard">
<!-- 1st -->
<div class="white">&#9820;</div>
<div class="black">&#9822;</div>
<div class="white">&#9821;</div>
<div class="black">&#9819;</div>
<div class="white">&#9818;</div>
<div class="black">&#9821;</div>
<div class="white">&#9822;</div>
<div class="black">&#9820;</div>
<!-- 2nd -->
<div class="black">&#9821;</div>
<div class="white">&#9821;</div>
<div class="black">&#9821;</div>
<div class="white">&#9821;</div>
<div class="black">&#9821;</div>
<div class="white">&#9821;</div>
<div class="black">&#9821;</div>
<div class="white">&#9821;</div>
<!-- 3th -->
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<!-- 4st -->
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<!-- 5th -->
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<!-- 6th -->
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<!-- 7th -->
<div class="white">&#9817;</div>
<div class="black">&#9817;</div>
<div class="white">&#9817;</div>
<div class="black">&#9817;</div>
<div class="white">&#9817;</div>
<div class="black">&#9817;</div>
<div class="white">&#9817;</div>
<div class="black">&#9817;</div>
<!-- 8th -->
<div class="black">&#9814;</div>
<div class="white">&#9816;</div>
<div class="black">&#9815;</div>
<div class="white">&#9813;</div>
<div class="black">&#9812;</div>
<div class="white">&#9815;</div>
<div class="black">&#9816;</div>
<div class="white">&#9814;</div>
</div>
</body>
</html>

Note: You can simply use the Unicode pieces within your Html code provided your page supports UTF-8 Character set. To do so just include <meta charset="UTF-8" > in the <head> section of your webpage.