CSS3是一種用于網頁設計的樣式語言，它可以控制網頁的外觀和布局。而思維導圖則是一種可以將復雜概念清晰明了地展現出來的圖表工具。那么讓我們來看一下如何使用CSS3制作一個思維導圖的演示吧。

首先，在HTML文檔中引入CSS文件：

<link rel="stylesheet" href="css/styles.css">

然后，我們需要給每一個思維節點一個類名，以便我們可以通過CSS來樣式化它們：

<div class="node">我是一個節點</div>

接下來，我們可以使用偽元素::before來創建節點上的小箭頭：

.node::before {
content: '';
position: absolute;
top: 0;
left: -50px;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 50px 25px 0;
border-color: transparent #333 transparent transparent;
}

這個::before元素將會被放置在每一個節點的左邊，它的border-width屬性的第一項和第三項將決定箭頭的大小。在這個例子中，箭頭的高度是50px，寬度是25px。

我們還可以通過CSS的旋轉屬性，transform: rotate(-45deg);，使箭頭旋轉45度，變成一個比較漂亮的樣式。

.node::before {
content: '';
position: absolute;
top: 0;
left: -50px;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 50px 25px 0;
border-color: transparent #333 transparent transparent;
transform: rotate(-45deg);
}

最后，我們可以使用CSS3的過渡屬性來實現節點展開和折疊的動畫效果：

.node {
position: relative;
padding-left: 60px;
transition: all .5s ease;
}
.node.collapsed {
padding-left: 20px;
}
.node.collapsed::before {
transform: rotate(45deg);
}

通過給節點增加一個.collapsed的類，我們可以為它創建折疊的效果。在這個例子中，節點的左內邊距從60像素減小到20像素，箭頭也會旋轉45度。過渡屬性transition: all .5s ease;將會讓這個動畫更加平滑。

以上就是如何使用CSS3來創建一個思維導圖演示的全部內容。我們只需要編寫一個簡單的JavaScript代碼，來控制節點的折疊和展開即可。