关于前端:单标签实现复杂的棋盘布局

6次阅读

共计 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-sizebackground-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 订阅珍藏。

如果还有什么疑难或者倡议,能够多多交换,原创文章,文笔无限,满腹经纶,文中若有不正之处,万望告知。

正文完
 0