準備用bootstrap的treeview畫一個權限管理的頁面。右邊用一個panel。中間加一個箭頭。
兩邊都好弄，關鍵就是中間的這個箭頭不好弄，聽說css3可以畫箭頭，忍不住想試一下。
一開始代碼是這樣的：
效果是這樣的： 雖然沒有完全對齊，起碼還過得去。
但是菜單一折疊後，就明顯對不齊了。
然後各種嘗試。一開始以為top設定為50%就沒問題的。後來調成了45%。然後越調越不對。
後來嘗試使用js動态給after僞元素設定高度，沒有成功。
接着單獨寫了一個div,然後給它加上box pointer–right class,top設定為50%。效果好的很。
可以看到50%正好是正中間，是三角形的定點正好在正中間的位置。
直覺告訴我一定是高度出了問題。仔細排查後發現parent1~parent15在15個li标簽裡，被一個ul标簽包圍着。這個ul的高度才是真實的高度，#tree的高度比ul高了不少，是以一直對不齊。
然後修改代碼如下：
①把樣式加在ul上而不是外圍的div上。
可是ul是動态生成的，是以隻能用js加了，在treeview初始化完之後，給ul加樣式：
②top改為50%。
這回終于到正中間了，可惜是三角形的定點在正中間。
li标簽的高度是40。三角形的高度也是40，應該讓top減去20，這樣就能跟Parent 8對齊了。
搜了一些css3有calc函數，可以動态調整高度。
top設定為:
終于好了。中間出了小插曲就是，calc函數裡減号必須有空格，否則不起作用。
折疊之後也能對齊，多虧了css3炸天的calc函數。