html - What CSS feature would you use to show elevation on a 2D grid?

Question

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?

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.

Sample CSS/Grid is here.

.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;
}

<div class="square forest hill"></div>
        <div class="square plains mountain"></div>
        <div class="square plains ground"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>

标签： htmlcss

Answer 1

对于方块的简单 3d 效果来模拟图层，我建议使用box-shadow.

如果您使用多个图层（正如我认为您所说的游戏中有 3 个），您可以自定义box-shadow为不同的颜色、大小等。如果您想了解更多关于box-shadow 单击此处的信息。

这是我应用于元素的代码：box-shadow: inset 0 0 20px #000000;在 HTML/CSS 类下layers。

代码片段例如：

*注意：滚动到 CSS 部分的底部以添加上面带有注释的代码。

.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;
}

/* THIS IS FOR 3D LAYER EFFECT */
.layers {
  box-shadow: inset 0 0 20px #000000;
}

<div class="square forest hill layers"></div>
<div class="square forest hill"></div>
<div class="square plains mountain layers"></div>
<div class="square plains mountain"></div>