Web Tutorials

</>   CSS Tutorial

CSS

Cascading Style Sheet

Chowka Bhara (Board Game)

Source Code HTML + CSS

HTML Code of the above Diagram

Click for download images Images Zip

  • <html>
  • <head>
  • <meta charset="UTF-8">
  • <title>Chowka Bhara using Pure CSS and HTML</title>
  • <style type = "text/css">
  • .Chowka.table

  • {
  • margin : 20px auto;
  • border : 2px solid #333;
  • width : 510px;
  • height : 503px;
    •
  • }
  • .Chowka.table div.empty
  • {
  • float : left;
  • width : 70.8px;
  • height : 69.8px;
  • font-size : 40px;
  • text-align : center;
  • display : table-cell;
  • vertical-align : middle;
  • background-color : #fff;
  • border : 1px solid #000 !important;
    •
  • }
  • .Chowka.table div
  • {
  • z-index : 1;
  • position : relative;
    •
  • }
  • .Chowka.table div.empty.room:after
  • {
  • -webkit-transform : rotate ( 135deg );
  • -moz-transform : rotate( 135deg);
  • -ms-transform : rotate( 135deg);
  • -o-transform : rotate(135deg);
  • transform : rotate(135deg);
  • position : absolute;
  • background : white;
  • margin : 0 auto;
  • height : 102px;
  • content : "";
  • right : 0px;
  • top : -17px;
  • width : 2px;
  • left : 0px;
    •
  • }
  • .Chowka.table div.empty.room:before
  • {
  • -webkit-transform : rotate(-135deg);
  • -moz-transform : rotate(-135deg);
  • -ms-transform : rotate(-135deg);
  • -o-transform : rotate(-135deg);
  • transform : rotate(-135deg);
  • position : absolute;
  • background : white;
  • margin : 0 auto;
  • height : 125px;
  • content : "";
  • right : 0px;
  • top : -28px;
  • width : 2px;
  • left : 0px;
    •
  • }
  • .Chowka.table div.empty.room
  • {
  • background-color : #282256;
    •
  • }
  • .img1
  • {
  • padding-top: : 21px;
    •
  • }
  • </style>
  • </head>
  • <body>
  • <div class = "Chowka table">
  • <div class = "empty"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty coins room" ><span class = "valmd"><span class = "valmd-in">
    <img src = "http://skillpundit.com/cascading-stylesheet/img/Chowka/board-coins4.png" /></span></span></div>
  • <div class = "empty"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty" > </div>
  • <div class = "empty room"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty room"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty "> </div>
  • <div class = "empty"> </div>
  • <div class ="empty"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty coins room"><span class = "valmd"><span class = "valmd-in">
    <img src = "http://skillpundit.com/cascading-stylesheet/img/Chowka/board-coins2.png" /></span></span></div>
  • <div class = "empty"></div>
  • <div class = "empty"></div>
  • <div class = "empty boardcoins room"><span class = "valmd"><span class = "valmd-in">
    <img src = "http://skillpundit.com/cascading-stylesheet/img/Chowka/board-coins5.png" /></span></span></div>
  • <div class = "empty"></div>
  • <div class = "empty"></div>
  • <div class = "empty coins room"><span class = "valmd"><span class = "valmd-in">
    <img src = "http://skillpundit.com/cascading-stylesheet/img/Chowka/board-coins3.png" /></span></span></div>
  • <div class = "empty"> </div>
  • <div class = "empty"> </div>
  • <div class= "empty"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty room"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty room"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty coins room"><span class = "valmd"><span class = "valmd-in">
    <img src = "http://skillpundit.com/cascading-stylesheet/img/Chowka/board-coins1.png" /></span></span></div>
  • <div class = "empty"> </div>
  • <div class = "empty"> </div>
  • <div class = "empty"> </div>
  • </div>
    •
  • </body>
  • </html>