- 当前位置：首页 >域名 >单标签实现复杂的棋盘布局
单标签实现复杂的棋盘布局
发布时间：2025-11-05 12:08:53 来源：云智核 作者：数据库
最近，单标有群友问我，签实棋盘他们的现复一个作业，尽量使用少的布局标签去实现这样一个象棋布局：
他用了 60 多个标签，而他的单标同学，只用了 6 个，签实棋盘问我有没有办法尽可能的现复做到利用更少的标签去完成这个布局效果。
其实，布局对于一个页面的单标布局而言，标签越少不一定是签实棋盘好事，我们在考虑 DOM 的现复消耗的同时，也需要关注代码的布局可读性，以及后续基于这个布局的单标制作的交互的难易性等等。
当然，签实棋盘仅仅从用更少的现复标签完成这个布局的角度而言，我们能够把标签数压缩到多少呢个？（不考虑 <body> 和 <html>）
答案是 1 个。
本文就尝试使用一个标签完成这个效果，当然，源码库这仅仅是探索 CSS 的极限，不代表我推荐在实际业务中这样去写。
我们对整个布局进行一下拆分，大致可以分为三部分：网格 + 虚线交叉十字 + 特殊符号：
并且，像虚线交叉十字和特殊的符号都不止一个，这里必然会有一些技巧存在。
使用渐变实现网格
OK，首先，我们实现最简单的网格布局：
不考虑最外层的一圈边框，我们可以首先利用多重线性渐变实现一个网格布局：
.g-grid {width: 401px;
height: 451px;
background:
repeating-linear-gradient(#000, #000 1px, transparent 1px, transparent 50px),
repeating-linear-gradient(90deg, #000, #000 1px, transparent 1px, transparent 50px);
background-repeat: no-repeat;
background-size: 100% 100%, 100% 100%;
background-position: 0 0, 0 0;
}效果如下：
在最外层加一层边框有非常多办法，这里我们简单使用 outline 配合 outline-offset 即可：
.g-grid {
width: 401px;
height: 451px;
background:
repeating-linear-gradient(#000, #000 1px, transparent 1px, transparent 50px),
repeating-linear-gradient(90deg, #000, #000 1px, transparent 1px, transparent 50px);
background-repeat: no-repeat;
background-size: 100% 100%, 100% 100%;
background-position: 0 0, 0 0;
outline: 1px solid #000;
outline-offset: 5px;
}这样，一个架子就差不多了：
当然，棋盘中间的一行，是没有格子的。要将上述渐变代码处理一下，可以分成上下两块，利用 background-size 和 background-position 进行分隔。
当然，我们也可以在最上层直接再叠一层纯白色渐变：
.grid {
// ...
background:
// 最上层叠加一层白色渐变
linear-gradient(#fff, #fff),
// 下面两个重复线性渐变实现网格
repeating-linear-gradient(#000, #000 1px, transparent 1px, transparent 50px),
repeating-linear-gradient(90deg, #000, #000 1px, transparent 1px, transparent 50px);
background-repeat: no-repeat;
background-size: calc(100% - 2px) 49px, 100% 100%, 100% 100%;
background-position: 1px 201px, 0 0, 0 0;
}到这里，其实核心还都是渐变，目前共 3 层渐变，得到这样一个效果：
利用渐变实现交叉虚线十字
OK，我们继续，我们需要基于上述的香港云服务器基础，得到两个交叉虚线十字，像是这样：
这里其实真的有难度。想象一下，如果给你一个 DIV，去实现其中一个，可以怎么做呢？
通过 border 中特有的虚线 dashed？这样可能就需要两个元素设置单边的虚线边框，然后旋转相交得到。（可以利用元素的两个伪元素，实现在一个 DOM 中）。
当然，这样的话，我们的标签就不够用了。
所以，这里我们另辟蹊径，继续使用渐变！
首先，打个样，如果是一个 100px x 100px 的 DIV，可以怎么利用渐变去画交叉虚线十字呢？
div {position: relative;
margin: auto;
width: 100px;
height: 100px;
border: 1px solid #000;
background: linear-gradient(
45deg,
transparent 0, transparent calc(50% - 0.5px),
#000 calc(50% - 0.5px), #000 calc(50% + 0.5px),
transparent calc(50% + 0.5px), transparent 0);
}我们首先利用渐变，实现一条 1px 的斜线，注意这里的渐变是亿华云计算从透明到黑色到透明，实现了一条 45° 的斜线。
我们再反 45° 过来，利用多重线性渐变，实现透明到白色的渐变效果：
div {
position: relative;
margin: auto;
width: 100px;
height: 100px;
border: 1px solid #000;
background:
// 渐变 1
repeating-linear-gradient(-45deg, transparent 0, transparent 5px, #fff 5px, #fff 10px),
// 渐变 2
linear-gradient(45deg,
transparent 0, transparent calc(50% - 0.5px),
#000 calc(50% - 0.5px), #000 calc(50% + 0.5px),
transparent calc(50% + 0.5px), transparent 0);
}这样，我们就得到了一条虚线：
好吧，这一步有一些同学可能会有一点疑惑，怎么变过来的。
我把上面渐变 1的透明色改成黑色，就很好理解了：
想象一下，上图的黑色部分，如果是透明的，就能透出原本的那条斜线没有被白色遮挡住的地方。
这里，需要提一下，在渐变中，越是先书写的渐变，层级越高。
好，有了上面的铺垫，我们基于上面的代码，再继续利用渐变，把上下两个交叉虚线十字补齐即可：
.g-grid {
width: 401px;
height: 451px;
outline: 1px solid #000;
outline-offset: 5px;
background:
// 最上层的白色块，挡住中间的网格
linear-gradient(#fff, #fff),
// 实现网格布局
repeating-linear-gradient(#000, #000 1px, transparent 1px, transparent 50px),
repeating-linear-gradient(90deg, #000, #000 1px, transparent 1px, transparent 50px),
// 棋盘上方的虚线1
repeating-linear-gradient(-45deg, transparent 0, transparent 5px, #fff 5px, #fff 10px),
linear-gradient(45deg, transparent,
transparent calc(50% - 0.5px),
#000 calc(50% - 0.5px),
#000 calc(50% + 0.5px),
transparent calc(50% + 0.5px),
transparent 0),
// 棋盘上方的虚线2
repeating-linear-gradient(45deg, transparent 0, transparent 5px, #fff 5px, #fff 10px),
linear-gradient(-45deg, transparent,
transparent calc(50% - 0.5px),
#000 calc(50% - 0.5px),
#000 calc(50% + 0.5px),
transparent calc(50% + 0.5px),
transparent 0),
// 棋盘下方的虚线1
repeating-linear-gradient(-45deg, transparent 0, transparent 5px, #fff 5px, #fff 10px),
linear-gradient(45deg, transparent,
transparent calc(50% - 0.5px),
#000 calc(50% - 0.5px),
#000 calc(50% + 0.5px),
transparent calc(50% + 0.5px),
transparent 0),
// 棋盘下方的虚线2
repeating-linear-gradient(45deg, transparent 0, transparent 5px, #fff 5px, #fff 10px),
linear-gradient(-45deg, transparent,
transparent calc(50% - 0.5px),
#000 calc(50% - 0.5px),
#000 calc(50% + 0.5px),
transparent calc(50% + 0.5px),
transparent 0);
background-repeat: no-repeat;
background-size:
calc(100% - 2px) 49px, 100% 100%, 100% 100%,
// 交叉虚线 1
100px 100px, 100px 100px, 100px 100px, 100px 100px,
// 交叉虚线 2
100px 100px, 100px 100px, 100px 100px, 100px 100px;
background-position:
1px 201px, 0 0, 0 0,
// 交叉虚线 1
151px 0, 151px 0, 151px 0, 151px 0,
// 交叉虚线 2
151px 350px, 151px 350px, 151px 350px, 151px 350px;
}嚯，这渐变代码确实复杂了点，但是其实每一块的作用都是很清晰的，这样，我们的棋盘就变成了这样：
借助伪元素及 box-shadow 实现剩余符合
到这里，我们仅仅使用了元素本身，要知道，我们还有元素的两个伪元素没使用。要实现的只剩下多个的这个符合：
因为一共要实现 12 个这样的符号，有的符合还是不完整的，所有这些要在剩余的元素的两个伪元素中完成。可选的方法思来想去，也只有 box-shadow 了。
利用 box-shadow 能够非常好的复制自身。这个技巧其实也反复讲过非常多次了。
我们首先利用元素的一个伪元素，在这个位置，实现一个短横线：
代码大致如下：
.g-grid {
// ...
&::before {
content: "";
position: absolute;
top: 95px;
left: 35px;
width: 10px;
height: 1px;
background: #000;
}
}我们利用 box-shadow 复制自身，可以完成一半横线效果。当然这里由于是个镜面布局，可以利用镜像 -webkit-box-reflect: below 减少一半的代码：
.g-grid {
// ...
&::before {
content: "";
position: absolute;
top: 95px;
left: 35px;
width: 10px;
height: 1px;
background: #000;
box-shadow:
20px 0, 0 10px, 20px 10px,
300px 0, 320px 0, 300px 10px, 320px 10px,
-30px 50px, -30px 60px,
50px 50px, 50px 60px, 70px 50px, 70px 60px,
150px 50px, 150px 60px, 170px 50px, 170px 60px,
250px 50px, 250px 60px, 270px 50px, 270px 60px,
350px 50px, 350px 60px;
-webkit-box-reflect: below 259px;
}
}效果如下：
最后，利用另外一个伪元素，完成另外一半的竖向横线即可：
.g-grid {
// ...
&::before {
// ...
}
&::after {
// ...
box-shadow:
10px 0, 0 20px, 10px 20px,
300px 0px, 300px 20px, 310px 0, 310px 20px,
-40px 50px, -40px 70px,
50px 50px, 50px 70px, 60px 50px, 60px 70px,
150px 50px, 150px 70px, 160px 50px, 160px 70px,
250px 50px, 250px 70px, 260px 50px, 260px 70px,
350px 50px, 350px 70px;
-webkit-box-reflect: below 260px;
}
}这样，我们就在一个标签内，得到这样一个效果：
当然，还剩下楚河、汉界 4 个字，这个也简单直接加在 div 中即可，配合一些简单的 CSS 调整，整个效果就在一个标签内完成啦：
完整的代码你可以戳这里：CodePen Demo -- CSS Chess board[1]
好，实际中我确实不太推荐这么去写，纯粹是为了实现而实现，少了很多代码可读性的考量。因此，本文更多的是给大家带来一些思路，当遇到类似的问题的使用能够有更多的灵感。
最后
好了，本文到此结束，希望本文对你有所帮助 :)
参考资料[1]CodePen Demo -- CSS Chess board: https://codepen.io/Chokcoco/pen/JjvPjrN。
[2]Github -- iCSS: https://github.com/chokcoco/iCSS。
- 7zip 是一款开源的归档应用程序，开始是为 Windows 系统而开发的。它能对多种格式的档案文件进行打包或解包处理，除了支持其原生的 7z 格式的文档外，还支持包括 XZ、GZIP、TAR、ZIP 和 BZIP2 等这些格式。 通常，7zip 也用来解压 RAR、DEB、RPM 和 ISO 等格式的文件。除了简单的归档功能，7zip 还具有支持 AES-256 算法加密以及自解压和建立多卷存档功能。在支持 POSIX 标准的系统上（Linux、Unix、BSD），原生的 7zip 程序被移植过来并被命名为 p7zip（“POSIX 7zip” 的简称）。下面介绍如何在 Linux 中安装 7zip （或 p7zip）。在 Debian、Ubuntu 或 Linux Mint 系统中安装 7zip在基于的 Debian 的发布系统中存在有三种 7zip 的软件包。 p7zip: 包含 7zr（最小的 7zip 归档工具），仅仅只能处理原生的 7z 格式。 p7zip-full: 包含 7z ，支持 7z、LZMA2、XZ、ZIP、CAB、GZIP、BZIP2、ARJ、TAR、CPIO、RPM、ISO 和 DEB 格式。 p7zip-rar: 包含一个能解压 RAR 文件的插件。建议安装 p7zip-full 包（不是 p7zip），因为这是最完全的 7zip 程序包，它支持很多归档格式。此外，假如您想处理 RAR 文件话，还需要安装 p7zip-rar 包，做成一个独立的插件包的原因是因为 RAR 是一种专有格式。复制代码代码如下: $ sudo apt-get install p7zip-full p7zip-rar 在 Fedora 或 CentOS/RHEL 系统中安装 7zip基于红帽的发布系统上提供了两个 7zip 的软件包。 p7zip: 包含 7za 命令，支持 7z、ZIP、GZIP、CAB、ARJ、BZIP2、TAR、CPIO、RPM 和 DEB 格式。 p7zip-plugins: 包含 7z 命令，额外的插件，它扩展了 7za 命令（例如支持 ISO 格式的抽取）。在 CentOS/RHEL 系统中，在运行下面命令前您需要确保 EPEL 资源库 可用，但在 Fedora 系统中就不需要额外的资源库了。复制代码代码如下:$ sudo yum install p7zip p7zip-plugins 注意，跟基于 Debian 的发布系统不同的是，基于红帽的发布系统没有提供 RAR 插件，所以您不能使用 7z 命令来抽取解压 RAR 文件。使用 7z 创建或提取归档文件一旦安装好 7zip 软件后，就可以使用 7z 命令来打包解包各式各样的归档文件了。7z 命令会使用不同的插件来辅助处理对应格式的归档文件。使用 “a” 选项就可以创建一个归档文件，它可以创建 7z、XZ、GZIP、TAR、 ZIP 和 BZIP2 这几种格式的文件。假如指定的归档文件已经存在的话，它会把文件“附加”到存在的归档中，而不是覆盖原有归档文件。复制代码代码如下:$ 7z a 使用 “e” 选项可以抽取一个归档文件，抽取出的文件会放在当前目录。抽取支持的格式比创建时支持的格式要多的多，包括 7z、XZ、GZIP、TAR、ZIP、BZIP2、LZMA2、CAB、ARJ、CPIO、RPM、ISO 和 DEB 这些格式。复制代码代码如下:$ 7z e 解包的另外一种方式是使用 “x” 选项。和 “e” 选项不同的是，它使用的是全路径来抽取归档的内容。复制代码代码如下:$ 7z x 要查看归档的文件列表，使用 “l” 选项。复制代码代码如下:$ 7z l 要更新或删除归档文件，分别使用 “u” 和 “d” 选项。复制代码代码如下: $ 7z u $ 7z d 要测试归档的完整性，使用：复制代码代码如下:$ 7z t
- 分布式事务数据库架构设计
- zabbix 2.2.0 Vmware ESXI之简单监控
- 公司即将在AI上浪费数十亿美元，如何避免成为其中之一
- 中兴N5S电信版（中兴N5S电信版带给你全新体验）
- CentOS 6.4 搭建VPN Server端
- 大语言模型（LLM）最常见的十大安全风险
- 在MySQL中用UUID当主键，被组长给喷了！
- 以护你妹卫生巾怎么样？（全方位呵护，舒适安心；卫生巾选择指南）
- 每个Linux用户都应该了解的命令行省时技巧
- ubuntu gedit中文乱码看起来很烦人，本文提供两种解决途径，终端命令行途径或者图形界面操作途径，其实原理都是增加编码类型，问题显示如下图，查看文档内容，发现乱码方法一：终端途径1、打开终端2、在终端中输入下面的内容，回车 复制内容到剪贴板 gconftool-2 --set --type=list --list-type=string /apps/gedit-2/preferences/encodings/auto_detected [UTF-8,CURRENT,GB18030,BIG5-HKSCS,UTF-16] 方法二：图形界面途径1、同时按住 Alt-F2，打开“Run Application”窗口2、输入gconf-editor，点击“Run“，进入Configuration Editor界面3、点击左边的”+“号找到 /apps/gedit-2/preferences/encodings，并单击4、右键auto_detected，点击“Edit Key”5、点击“Add”，在New list value处输入GB18030，点击OK6、选中列表最下面的“GB18030”，点击右边的“Up”，直到“GB18030”移动到列表的最上方7、点击OK关闭Configuration Editor8、再次查看文档内容，乱码消失注意事项：命令行的命令不要输入错误。
- 聊聊SQL中的分组集
- 微软：87% 的英国企业极易受到网络攻击，AI或成破局“解药”
- SpringBoot 如何优雅使用事务
- 以爱HiFi，感受音乐的魅力（探索音质细节，开启私人音乐之旅）
- MySQL 窗口函数是什么，有这么好用
- 分布式系统中的数据复制
- Linux操作系统中的文件管理技巧
- 微星GTX1070Ti的性能评测与优势分析（全面揭示微星GTX1070Ti显卡在游戏和计算方面的卓越表现）
- 如何在Linux上实现文件系统的自动检查和修复？
随便看看
- Copyright © 2025 Powered by 单标签实现复杂的棋盘布局,云智核 滇ICP备2023006006号-28sitemap