共计 5657 个字符，预计需要花费 15 分钟才能阅读完成。
最近，有群友问我，他们的一个作业，尽量应用少的标签去实现这样一个象棋布局：
他 用了 60 多个标签，而他的同学，只用了 6 个，问我有没有方法尽可能的做到利用更少的标签去实现这个布局成果。
其实，对于一个页面的布局而言，标签越少不肯定是坏事，咱们在思考 DOM 的耗费的同时，也须要关注代码的可读性，以及后续基于这个布局的制作的交互的难易性等等。
当然，仅仅从用更少的标签实现这个布局的角度而言，咱们可能把标签数压缩到多少呢个？（不思考 <body> 和 <html>）
答案是 1 个。
本文就尝试应用一个标签实现这个成果，当然，这仅仅是摸索 CSS 的极限，不代表我举荐在理论业务中这样去写。
咱们对整个布局进行一下拆分，大抵能够分为三局部：网格 + 虚线穿插十字 + 特殊符号：
并且，像虚线穿插十字和非凡的符号都不止一个，这里必然会有一些技巧存在。
应用突变实现网格
OK，首先，咱们实现最简略的网格布局：
不思考最外层的一圈边框，咱们能够首先利用 多重线性突变 实现一个网格布局：
<div class="g-grid"></div>.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></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
好，理论中我的确不太举荐这么去写，纯正是为了实现而实现，少了很多代码可读性的考量。因而，本文更多的是给大家带来一些思路，当遇到相似的问题的应用可能有更多的灵感。
最初
好了，本文到此结束，心愿本文对你有所帮忙 :)
更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。
