web開發中，三角形的日常應用，以三角形指示箭頭最為常見，其用css來實現非常簡單，熟悉了之後相比於引入svg或是背景會是更好更靈活的選擇。
而三角箭頭一般而言，又分為兩種，一種是視覺上沒有邊框的，我們叫做實心三角形；還有一種是視覺上有邊框的，而三角箭頭刨去邊框的部分又要與主體元素的背景顏色一致，我們叫做空心三角形。
言歸正傳，講一下怎樣實現的。
首先，講一下三角形的實現原理，熟悉的同學可以跳過這一步。
三角形實現原理
三角形的實現原理是寬高都不設定(即為0)，只設定邊框，如果四個邊框都設定寬度(border-width)、樣式(border-style)和顏色(border-color)，效果如圖：
上面是四個邊框border-width一樣時的效果，其實border-width是可以自己根據需求來變化的，如下圖效果：
上面看到的都是四個三角形，其實想實現單個的三角形只需把其他三個三角形的border-color設定為透明色transparent就可以了(2023年還用考慮ie6嗎)。
這樣就實現三角形了。
實心三角形箭頭
實心三角形的原理就是乙個三角形絕對定位到主體元素邊界處並連線起來。
為了語義化，我們用單標籤，三角形用偽類來實現。
把三角形顏色換成和主體元素一致的背景色就可以了。如下圖：
空心三角箭頭
空心三角形的原理就是乙個邊框顏色的三角形絕對定位到主體元素邊界處並連線起來，然後另乙個主體元素背景色的三角形絕對定位並覆蓋到第乙個三角形上面，關鍵的一點是第二個三角形相較於第乙個三角形定位上偏移的距離應等於邊框寬度。
說得可能比較晦澀，看效果圖會更清楚明白(為了區分顯示，第乙個三角形用的粉色，第二個白色)
把第乙個三角形顏色換成邊框顏色，第二個三角形顏色換成背景顏色就可以了。
為了語義化，我們使用單標籤，兩個三角形用before和after偽類來實現，因為after偽元素會覆蓋before偽元素，所以after偽元素就是第二個三角形。
第二個三角形定位的偏移距離
這是比較容易被忽略的一點！
為了視覺效果，也為了使用者體驗，我們應該將三角箭頭的邊框寬度和主體元素的邊框寬度保持一致。
一般可能會有同學認為第二個三角形的偏移值和主體元素邊框寬度一樣，其實是不對的。
第二個三角形相較於第乙個三角形的偏移值其實應該是主體元素邊框寬度的"根號2"倍，約為1.414，為了方便可以按1.4倍計算。
下圖是原理圖：
假設主體元素邊框寬度為6px，所以第二個三角形相較於第乙個三角形的偏移量應為6px*1.4 = 8.4px
空心三角形
把乙個字元三角形掏空，就能節省材料成本，減輕重量，但關鍵是為了追求另一種視覺效果。在設計的過程中，需要給出各種花紋的材料和大小尺寸的三角形樣板，通過電腦臨時做出來，以便看看效果。input每行包含乙個字元和乙個整數n 0這個題當初看到的時候挺簡單的，後來做了好長時間，這個輸出方式我表示很不理解，好像...
空心三角形
problem description 把乙個字元三角形掏空，就能節省材料成本，減輕重量，但關鍵是為了追求另一種視覺效果。在設計的過程中，需要給出各種花紋的材料和大小尺寸的三角形樣板，通過電腦臨時做出來，以便看看效果。input 每行包含乙個字元和乙個整數n 0output 每個樣板三角形之間應空上...
空心三角形
把乙個字元三角形掏空，就能節省材料成本，減輕重量，但關鍵是為了追求另一種視覺效果。在設計的過程中，需要給出各種花紋的材料和大小尺寸的三角形樣板，通過電腦臨時做出來，以便看看效果。input 每行包含乙個字元和乙個整數n 0a 7 sample output x aa a a aa a a aa a ...