Question

我正在尝试移植我在成长过程中曾经玩过的绝版棋盘游戏，并且试图确定在2D网格上显示的最佳图形方法。在现实生活中，每个木板广场都有2种地形类型（森林/平原），也是3种海拔高度之一。我目前正在使用颜色表示地形类型。我将正方形的中心打开以显示游戏作品。在尺寸上显示3D高程2的想法是什么？

我尝试使用边框厚度，但是我的CSS无法通过创建木板的方法来做到这一点。我的技术失误是了解如何显示边界...因此帮助弄清这一点将不胜感激。但是我想要达到的真正的最终状态是高度的2D表示。

示例CSS /网格为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>

Answer 1

为给正方形提供简单的3d效果以模拟图层，我建议使用box-shadow。

如果您使用多层（我想您说过游戏中有3层），则可以将box-shadow定制为不同的颜色，大小等。如果您想了解更多有关{{1 }} click here。

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

代码段例如：

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

layers

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

您将使用什么CSS功能在2D网格上显示高程？

1 个答案: