css的小箭頭原理
CSS border 繪製三角形的原理 CSS 的 border 屬性在元素寬高為零時，會顯示出四個三角形。這是因為四邊 border 的交界處本來就是斜角切割的，只是在正常情況下因為元素有寬高，這個特性並不明顯。
原理示意 當元素的 width 和 height 都是 0 時：
1 2 3 4 5 6 7 8 .triangle-demo { width: 0; height: 0; border-top: 50px solid red; border-right: 50px solid blue; border-bottom: 50px solid green; border-left: 50px solid yellow; } 你會看到四個三角形分別指向四個方向，各佔一角。
製作各方向三角形 要製作指向某方向的三角形，就把該方向的對面 border 設為有色，其他三邊設為 transparent：
向上三角形（▲） 1 2 3 4 5 6 7 .triangle-up { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid #333; /* 底部有色 = 三角形朝上 */ } 向下三角形（▼） 1 2 3 4 5 6 7 .