可纯CSS实现树形结构：一、无序列表缩进法，用伪元素绘连接线；二、Flexbox布局，配合transform画斜线；三、CSS Grid精确定位节点；四、SVG内联+CSS动画绘制路径。
如果您希望在网页中呈现层级清晰的树形结构，但不依赖JavaScript库或外部框架，则可以利用HTML嵌套与CSS样式组合实现。以下是几种纯CSS驱动的树形结构绘制方法：
一、使用无序列表与CSS缩进实现基础树形
该方法通过
- 和
- 的天然嵌套关系构建层级，并借助CSS的margin-left或padding-left控制子节点缩进，配合自定义列表标记模拟树节点连接线。适用于静态、层级较浅的结构。
1、在HTML中编写嵌套的
- 与
- 结构，每个
- 代表一个节点，子节点包裹在父
- 内部的
- 中。
- 添加position: relative，并在其::before伪元素中绘制垂直线段，长度依据层级动态计算。
4、为除第一级外的每个
- 的::before设置content: ""、position: absolute、left: -16px、top: 0、height: 100%、border-left: 1px solid #999。
5、为每个
- 的最后一个子
- 的::after添加水平横线，连接至父节点，形成“T”形分支结构。
二、采用Flexbox布局构建可伸缩树形节点
该方式利用display: flex控制节点水平对齐与垂直分布，结合transform旋转实现斜向连接线，适合需要响应式适配或节点宽度不一致的场景。
1、将每个节点封装为
，父子关系通过嵌套容器表达。2、为.parent节点设置display: flex、flex-direction: column，并为其.children设置display: flex、flex-wrap: wrap。
3、在父节点右侧插入一个绝对定位的
，内含两个span：一个垂直线（height: 100%）、一个水平线（width: 24px），交汇处设为border-radius: 50%模拟连接圆点。4、对每个.children > .node应用margin-top: 12px统一垂直间距，避免重叠。
5、当子节点数量超过一行时，使用justify-content: center使多列子节点居中对齐主干。
三、利用CSS Grid定义固定坐标树形图
此方法将整棵树视为二维坐标系，通过grid-template-rows/columns显式声明行高与列宽，再用grid-row/grid-column精确定位每个节点位置，适合结构稳定、需严格对齐的组织架构图。
1、在外层容器上设置display: grid、grid-template-columns: repeat(7, 1fr)、grid-template-rows: repeat(5, auto)，预留足够行列空间。
2、为根节点设置grid-column: 4 / 5、grid-row: 1 / 2，使其居中于第一行。
3、为第二层三个子节点分别指定grid-column: 2 / 3、grid-column: 4 / 5、grid-column: 6 / 7，全部位于grid-row: 2 / 3。
4、在对应行列交叉处添加::before伪元素，绘制从父节点中心到子节点中心的斜线，使用transform: rotate()配合height和width微调角度与长度。
5、所有节点统一设置text-align: center与padding: 8px 12px，确保视觉尺寸一致。
四、基于SVG内联绘制带路径动画的树形结构
该方案将树形结构的连接关系抽象为SVG
与 元素，通过CSS控制stroke-dasharray与stroke-dashoffset实现路径绘制动画，增强可视化表现力。 1、在HTML中嵌入svg>标签，设置固定viewBox，如viewBox="0 0 800 400"。
2、使用
绘制每个节点，cx/cy坐标按层级与编号计算，例如根节点cx="400" cy="40"，子节点cy="120"，横向间隔200px。 3、为每条父子连接生成
元素，x1/y1取父节点坐标，x2/y2取子节点坐标，设置stroke: #666、stroke-width: 2。 4、为每个
添加CSS类，定义stroke-dasharray: 100与stroke-dashoffset: 100，再通过@keyframes将offset变为0，实现“生长”效果。 5、节点
添加fill: #fff、stroke: #333、stroke-width: 1.5，并用 元素在圆心下方添加文字标签。
2、为所有
- 设置list-style: none以移除默认圆点或数字标记。
立即学习“前端免费学习笔记（深入）”；
3、为每个
- 添加position: relative，并在其::before伪元素中绘制垂直线段，长度依据层级动态计算。
