Skip to content

Instantly share code, notes, and snippets.

@cre-o

cre-o/chess_board.html

Last active April 2, 2020 22:38
Show Gist options
  • Save cre-o/836c26a23b552168be9d055b641ff52c to your computer and use it in GitHub Desktop.
Save cre-o/836c26a23b552168be9d055b641ff52c to your computer and use it in GitHub Desktop.
Download ZIP
Friend asked me for help (creative way to render chess board)
Raw
chess_board.html
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>*** unnamed text ***</title></head><body>
<style>
:root {
--green: rgb(146, 159, 99);
}
table.CHESS
{
border-collapse: collapse;
overflow: hidden;
position: relative;
}
table.CHESS td
{
width: 50px;
height: 50px;
border: solid gray 1px;
position: relative;
}
table.CHESS tr {
background-color: #fff;
position: relative;
}
table.CHESS tr td:nth-child(odd) + td {
background-color: #000;
}
table.CHESS tr:nth-child(even) {
background-color: #000;
border-color: 1px solid gray;
padding: 1px;
}
table.CHESS tbody {
overflow: hidden;
}
table.CHESS tbody:before, table.CHESS tbody:after {
content: '';
position: absolute;
display: inline-block;
z-index: 2;
height: 100%;
width: 10px;
top: 0;
}
table.CHESS tbody:before {
left: 0;
border-right: 1px solid gray;
}
table.CHESS tbody:after {
border-left: 1px solid gray;
margin-left: 9px;
right: 0;
}
table.CHESS tr:nth-child(even) td:nth-child(even) {
background-color: #fff;
border-color: gray;
}
table.CHESS tr:first-child td:after, table.CHESS tr:last-child td:after {
position: absolute;
width: 100%;
height: 10px;
content: '';
background: var(--green);
display: inline-block;
left: 0;
}
table.CHESS tr:first-child td:after {
border-bottom: 1px solid gray;
top: 0;
}
table.CHESS tr:last-child td:after {
bottom: 0;
border-top: 1px solid gray;
}
table.CHESS tr td:first-child:before, table.CHESS tr td:last-child:before {
position: absolute;
height: 100%;
content: '';
background: var(--green);
display: inline-block;
width: 10px;
top: 0;
}
table.CHESS tr td:first-child:before {
left: 0;
}
table.CHESS tr td:last-child:before {
right: 0;
}
table.CHESS tr:first-child td {
padding-top: 10px;
}
table.CHESS tr:last-child td{
padding-bottom: 10px;
}
table.CHESS tr td:first-child {
padding-left: 10px;
}
table.CHESS tr td:last-child {
padding-right: 10px;
}
</style>
<table class='CHESS'>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment