CSS做帶邊框的三角形，是一項非常實用的技能。想象一下，當我們需要在網頁上制作一個指向某個物體的箭頭，或者需要在列表中標識出某一項的時候，這項技能便可以派上用場。

.triangle {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #ccc;
}

上面的代碼便是制作帶邊框的三角形的常規方法了。下面我們詳細解析一下每一項CSS屬性的意義。

• width: 0;和height: 0;這兩項屬性設置了三角形的寬度和高度，因為三角形本身沒有實體區域，所以需要將其寬高都設置為0。
• border-top: 20px solid transparent;和border-bottom: 20px solid transparent;這兩項屬性設置了三角形的兩個斜邊，使用transparent設置透明而不是使用顏色值的目的是可以讓斜邊與三角形本身平滑過渡。
• border-right: 20px solid #ccc;這項則設置了三角形的邊框顏色及寬度。

最后，除了簡單的灰色三角形，我們還可以通過調整上述屬性細節，進一步美化三角形效果，例如增加邊框圓角、改變邊框寬度，增加投影等等。這些都需要我們靈活運用CSS掌握。