title: What CSS feature would you use to show elevation on a 2D grid?
body: <p>I'm trying to port an out of print board game that I used to play while growing up, and I'm trying to determine the best graphical method to display on a 2D grid.  In real life, each board square has 2 terrain types (forest/plains), and also one of three elevation levels.  I'm currently using color to represent terrain type.  I'm leaving the center of the square open to show game pieces.  What would an idea be to show 3D elevation 2 dimensionally?  </p>
  
  <p>I tried using border thickness, but my CSS is failing me for that with my method of creating the board.  My technical lapse is understanding how to get the borders to display... so help figuring that out would be appreciated.  But the real end state I'm looking to get to is a 2D representation of height.  </p>
  
  <p>Sample CSS/Grid is <a href="http://jsfiddle.net/dxqwy6ge/" rel="nofollow noreferrer">here</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.square {
      float:left;
      position: relative;
      width: 11%;
      padding-bottom: 11%; /* = width for a 1:1 aspect ratio */
      margin: .2%;
      background-color: #1E1E1E;
      overflow: hidden;
  }
  .content
  {
      position:absolute;
      height:80%; /* = 100% - 2*10% padding */
      width:90%; /* = 100% - 2*5% padding */
      padding: 10% 5%;
  }
  .forest
  {
      background-color: rgb(7, 90, 5);
  }
  .plains
  {
      background-color: rgb(245, 238, 136);
  }
  .hill
  {
      border-width: medium;
  }
  .mountain
  {
      border-width: thick;
      border-color: red;
  }
  .ground
  {
      border-width: thin;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="square forest hill"&gt;&lt;/div&gt;
          &lt;div class="square plains mountain"&gt;&lt;/div&gt;
          &lt;div class="square plains ground"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>