使用ASCII码符号和CSS实现的文件夹界面图形

ASCII-art folder structure diagram in semantic markup + CSS

css, folder, tree

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 6588
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

h1,
h2,
pre,
div {
    font-family: monospace;
    font-size: 1em;
    line-height: 1.1;
    -webkit-text-size-adjust: none;
}
h1 {
    font-size: 1.5em;
}
h2 {
    font-size: 1.25em;
}
ul.ascii,
ul.ascii ul {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}
ul.ascii li {
    margin: 0;
    padding: 0;
}
/* level 1 */

ul.ascii > li::before {
    content: "";
}
/* level 2 */

ul.ascii > li > ul > li::before {
    content: "├──\00a0";
}
ul.ascii > li > ul > li:last-child::before {
    content: "└──\00a0";
}
/* level 3 */

ul.ascii > li > ul > li > ul > li::before {
    content: "│\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li > ul > li:last-child::before {
    content: "│\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li:last-child > ul > li::before {
    content: "\00a0\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li:last-child > ul > li:last-child::before {
    content: "\00a0\00a0\00a0\00a0└──\00a0";
}
/* level 4 */

ul.ascii > li > ul > li > ul > li > ul > li::before {
    content: "│\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li > ul > li > ul > li:last-child::before {
    content: "│\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li > ul > li:last-child > ul > li::before {
    content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li > ul > li:last-child > ul > li:last-child::before {
    content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li:last-child > ul > li > ul > li::before {
    content: "\00a0\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li:last-child > ul > li > ul > li:last-child::before {
    content: "\00a0\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li:last-child > ul > li:last-child > ul > li::before {
    content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li:last-child > ul > li:last-child > ul > li:last-child::before {
    content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0";
}
/* level 5 */

ul.ascii > li > ul > li > ul > li > ul > li > ul > li::before {
    content: "│\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li > ul > li > ul > li > ul > li:last-child::before {
    content: "│\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li > ul > li > ul > li:last-child > ul > li::before {
    content: "│\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li > ul > li > ul > li:last-child > ul > li:last-child::before {
    content: "│\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li > ul > li:last-child > ul > li > ul > li::before {
    content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li > ul > li:last-child > ul > li > ul > li:last-child::before {
    content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li > ul > li:last-child > ul > li:last-child > ul > li::before {
    content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li > ul > li:last-child > ul > li:last-child > ul > li:last-child::before {
    content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li:last-child > ul > li > ul > li > ul > li::before {
    content: "\00a0\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li:last-child > ul > li > ul > li > ul > li:last-child::before {
    content: "\00a0\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li:last-child > ul > li > ul > li:last-child > ul > li::before {
    content: "\00a0\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li:last-child > ul > li > ul > li:last-child > ul > li:last-child::before {
    content: "\00a0\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li:last-child > ul > li:last-child > ul > li > ul > li::before {
    content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li:last-child > ul > li:last-child > ul > li > ul > li:last-child::before {
    content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li::before {
    content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child::before {
    content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0";
}
/* level 6 */

ul.ascii > li > ul > li > ul > li > ul > li > ul > li > ul > li::before {
    content: "│\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li > ul > li > ul > li > ul > li > ul > li:last-child::before {
    content: "│\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li > ul > li > ul > li > ul > li:last-child > ul > li::before {
    content: "│\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li > ul > li > ul > li > ul > li:last-child > ul > li:last-child::before {
    content: "│\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li > ul > li > ul > li:last-child > ul > li > ul > li::before {
    content: "│\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li > ul > li > ul > li:last-child > ul > li > ul > li:last-child::before {
    content: "│\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li > ul > li > ul > li:last-child > ul > li:last-child > ul > li::before {
    content: "│\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li > ul > li > ul > li:last-child > ul > li:last-child > ul > li:last-child::before {
    content: "│\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li > ul > li:last-child > ul > li > ul > li > ul > li::before {
    content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li > ul > li:last-child > ul > li > ul > li > ul > li:last-child::before {
    content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li > ul > li:last-child > ul > li > ul > li:last-child > ul > li::before {
    content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li > ul > li:last-child > ul > li > ul > li:last-child > ul > li:last-child::before {
    content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li > ul > li:last-child > ul > li:last-child > ul > li > ul > li::before {
    content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li > ul > li:last-child > ul > li:last-child > ul > li > ul > li:last-child::before {
    content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li::before {
    content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child::before {
    content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li:last-child > ul > li > ul > li > ul > li > ul > li::before {
    content: "\00a0\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li:last-child > ul > li > ul > li > ul > li > ul > li:last-child::before {
    content: "\00a0\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li:last-child > ul > li > ul > li > ul > li:last-child > ul > li::before {
    content: "\00a0\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li:last-child > ul > li > ul > li > ul > li:last-child > ul > li:last-child::before {
    content: "\00a0\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li:last-child > ul > li > ul > li:last-child > ul > li > ul > li::before {
    content: "\00a0\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li:last-child > ul > li > ul > li:last-child > ul > li > ul > li:last-child::before {
    content: "\00a0\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li:last-child > ul > li > ul > li:last-child > ul > li:last-child > ul > li::before {
    content: "\00a0\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li:last-child > ul > li > ul > li:last-child > ul > li:last-child > ul > li:last-child::before {
    content: "\00a0\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li:last-child > ul > li:last-child > ul > li > ul > li > ul > li::before {
    content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li:last-child > ul > li:last-child > ul > li > ul > li > ul > li:last-child::before {
    content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li:last-child > ul > li:last-child > ul > li > ul > li:last-child > ul > li::before {
    content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li:last-child > ul > li:last-child > ul > li > ul > li:last-child > ul > li:last-child::before {
    content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li > ul > li::before {
    content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li > ul > li:last-child::before {
    content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0";
}
ul.ascii > li > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li::before {
    content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"
}
ul.ascii > li > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child::before {
    content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0";
}

HTML

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/
</pre>
<h2>Styled nested lists</h2>
<div>
    <ul class="ascii">
        <li>bootstrap/
            <ul>
                <li>css/
                    <ul>
                        <li>bootstrap.css</li>
                        <li>bootstrap.min.css</li>
                        <li>bootstrap-theme.css</li>
                        <li>bootstrap-theme.min.css</li>
                    </ul>
                </li>
                <li>js/
                    <ul>
                        <li>bootstrap.js</li>
                        <li>bootstrap.min.js</li>
                    </ul>
                </li>
                <li>fonts/
                    <ul>
                        <li>glyphicons-halflings-regular.eot</li>
                        <li>glyphicons-halflings-regular.svg</li>
                        <li>glyphicons-halflings-regular.ttf</li>
                        <li>glyphicons-halflings-regular.woff</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

<ul class="ascii">
        <li>bootstrap/
            <ul>
                <li>less/</li>
                <li>js/</li>
                <li>fonts/</li>
                <li>dist/
                    <ul>
                        <li>css/</li>
                        <li>js/</li>
                        <li>fonts/</li>
                    </ul>
                </li>
                <li>docs/
                    <ul>
                        <li>examples/</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

<h2>Six levels deep...</h2>
    <ul class="ascii">
        <li>one
            <ul>
                <li>two
                    <ul>
                        <li>three
                            <ul>
                                <li>four
                                    <ul>
                                        <li>five
                                            <ul>
                                                <li>six</li>
                                            </ul>
                                        </li>
                                        <li>foo</li>
                                    </ul>
                                </li>
                                <li>bar</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>baz</li>
            </ul>
        </li>
    </ul>

</div>

ASCII-art folder structure diagram in semantic markup + CSS

css, folder, tree

编辑器支持Emmet

快捷键

ASCII-art folder structure diagram in semantic markup + CSS

css, folder, tree

使用CSS3 border-image和SVG实现的美丽边界图形

使用CSS变量和网格布局实现响应式橄榄形信息图界面

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：