Chessboard with pieces using pure HTML and CSS

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.

More Posts related to Html,

More Posts: