Trying to build a chess diagram with just css3, but seems like my result is far from correct (for now, just a line of 4 cells) :
- cells seems to have margin different from 0
- cells are not squares, though I've used box-sizing css property
What did I misunderstand ?
My html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.chess_board {
display: block;
}
.chess_cell {
display: inline;
font-family: serif;
font-size: 2.3em;
width: 0.8em;
height: 0.8em;
margin: 0;
box-sizing: border-box;
}
.white_cell {
background-color: rgb(217, 245, 2);
}
.black_cell {
background-color: rgb(89, 34, 21);
}
.white_piece {
color: rgb(179, 48, 63);
}
</style>
</head>
<body>
My chess board
<div class="chess_board">
<div class="chess_cell black_cell">♚</div>
<div class="chess_cell white_cell white_piece">♕</div>
<div class="chess_cell white_cell">♚</div>
<div class="chess_cell black_cell white_piece">♕</div>
</div>
My another chess board ... to be drawn !
</body>
</html>
