腦圖是一種可以方便地呈現思維結構的圖表。在Web開發中，我們可以用CSS來實現腦圖的連線。

.node {
position: relative;
display: inline-block;
margin-right: 40px;
}
/*節點連接線*/
.node::before {
content: "";
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-50%);
height: 1px;
width: 20px;
background-color: #999;
}
/*節點間的連線*/
.node::after {
content: "";
position: absolute;
left: -40px;
top: 50%;
transform: translateY(-50%);
height: 1px;
width: 20px;
background-color: #999;
z-index: -1;
}
.node:first-child::before {
display: none;
}
/*根節點連接線*/
.root::before {
height: 0px;
width: 0px;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #999;
left: -20px;
top: 50%;
transform: translateY(-50%);
background-color: transparent;
}

通過設置節點的偽元素::before和::after，我們可以為每個節點添加連接線。根節點需要特別處理，我們可以使用CSS3的border屬性來實現一個三角形。