准备用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函数。