CSS 繪製三角形技巧：無需圖片實現三角箭頭效果

在網頁開發中，經常需要各種三角形圖標，如下拉選單箭頭、工具提示尖角等。許多初學者會直覺地使用圖片，但實際上純 CSS 就能輕鬆繪製三角形，且具備體積小、無請求、易維護等優勢。

核心原理：利用邊框特性

CSS 三角形的秘密在於 border 屬性。當元素的寬高均為 0 時，四條邊框會形成四個三角形拼接成的正方形。透過將三條邊框設為透明，保留一條有顏色的邊框，即可得到一個純三角形。

.triangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #333; /* 向上的三角形 */
}

四個方向的三角形寫法

• 向上： border-bottom 著色，左右透明
• 向下： border-top 著色，左右透明
• 向左： border-right 著色，上下透明
• 向右： border-left 著色，上下透明

進階應用：工具提示尖角

結合 ::before / ::after 偽元素，可輕鬆為對話框、下拉選單添加尖角，且無需額外 HTML 標籤：

.tooltip::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

優缺點對比

最佳實踐建議

1. 簡單幾何三角形優先用 CSS
2. 複雜圖標建議用 SVG 或 Icon Font
3. 注意 border-width 控制大小，border-color 控制顏色與方向
4. 搭配 transform: rotate() 可獲得任意角度

掌握這項技巧，能讓你的 CSS 工具箱更輕量、靈活，減少對圖片資源的依賴。