CSS透明小三角形是網頁設計中常見的一個元素。在箭頭、指示器等場合都可以使用。下面我們來學習如何用CSS實現透明小三角形。

箭頭的設計一般都采用兩個相鄰的矩形的右下或者左下距離的計算方法，即使用border實現：
.arrow-down {
position: relative; /*定位父級*/
width: 0;
height: 0;
border-left: 6px solid transparent; /*沒帶顏色，透明*/
border-right: 6px solid transparent; /*同理*/
border-top: 6px solid pink; /*上邊框顏色*/
margin: 40px auto 0; /*下距離40px*/
}

以上代碼用CSS實現了一個向下的箭頭，使用border-left和border-right來控制左右兩側透明邊框。使用border-top控制箭頭的樣式，修改顏色即可改變箭頭的顏色。

同理可實現向上、向左、向右的透明小三角形：
.arrow-up { 這里top換成bottom }
.arrow-left { 這里left與右斜杠換 }
.arrow-right { 這里right與左斜杠換 }

以上代碼中只需要改變箭頭位置以及要繪制的形狀就可以實現不同方向的透明小三角形。使用這些小技巧，在頁面設計中可以更加出色的呈現需要的視覺效果。