一、Border 邊框法（最常用）

原理：通過設置元素的寬高為 0，利用透明邊框相交形成三角形。

.triangle {width: 0;height: 0;border-left: 50px solid transparent;  /* 左側邊框透明 */border-right: 50px solid transparent; /* 右側邊框透明 */border-bottom: 100px solid red;       /* 下邊框顯示顏色 */
}

? 關鍵屬性：width: 0; height: 0; + border-* 組合

? 方向控制：

? 向上：border-bottom 有顏色，其他透明

? 向下：border-top 有顏色，其他透明

? 向左/右：設置對應邊框顏色（如左三角形：border-right 有顏色）

? 優點：兼容性極佳（包括 IE8+），代碼簡單

? 缺點：無法在三角形內部添加內容

等腰直角三角形：

.triangle {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid lightblue;border-bottom: 50px solid lightblue;border-top: 50px solid transparent;
}

原理

1. 構建一個正方形
2. 為正方形添加不同方向的邊框
3. 將正方形的寬高設置為0
4. 設置三個邊框為透明

// 1
.triangle {width: 50px;height: 50px;background-color: red;
}// 2
.trangle {// ....border-left: 50px solid yellow;border-right: 50px solid green;border-bottom: 50px solid lightblue;border-top: 50px solid pink;
}// 3
.trangle {// ....width: 0;height: 0;
}// 4
.trangle {// ....border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 50px solid transparent;border-top: 50px solid pink;
}

---

二、Clip-Path 裁剪法

原理：通過裁剪元素的可見區域形成三角形。

.triangle {width: 100px;height: 100px;background: red;clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* 定義三個頂點坐標 */
}

? 關鍵屬性：clip-path: polygon(x1 y1, x2 y2, x3 y3)

? 方向控制：調整坐標點順序（如 polygon(0% 0%, 100% 50%, 0% 100%) 為右三角形）

? 優點：支持任意形狀，容器可添加內容，響應式自適應

? 缺點：低版本瀏覽器兼容性差（如 IE 不支持）

---

三、漸變法（Linear/Conic Gradient）

原理：利用線性或角向漸變的顏色斷點生成三角形。

.triangle {width: 100px;height: 100px;background: linear-gradient(45deg, red 50%, transparent 50%);
}

? 關鍵屬性：linear-gradient() 或 conic-gradient()

? 方向控制：調整漸變角度（如 to bottom right）或顏色斷點位置

? 優點：支持復雜漸變效果，容器保留原有尺寸

? 缺點：實現復雜度高，需調試角度和斷點

---

四、字符法（特殊場景）

原理：使用 Unicode 字符直接顯示三角形符號。

<div class="triangle">▼</div>

.triangle {font-size: 50px;color: red;
}

? 關鍵屬性：font-family + Unicode 字符（如 ▲ ▼ ? ?）

? 優點：無需 CSS 繪制

? 缺點：依賴字體庫，樣式控制有限

---

方案對比與選型建議

方法	兼容性	靈活性	內容支持	適用場景
Border 邊框法	????	??	?	簡單箭頭、工具提示
Clip-Path	??	???	?	復雜形狀、響應式設計
漸變法	???	??	?	漸變效果、背景裝飾
字符法	????	?	?	快速實現、無需精確控制

推薦優先級：

1. Border 邊框法（兼容性強，代碼簡潔）
2. Clip-Path 法（現代項目首選，靈活易維護）
3. 漸變法（特殊視覺效果需求）

---

注意事項
? 等邊三角形：需計算邊框寬度比例（如底邊 100px，左右邊框 ≈87px）

? 性能優化：避免頻繁使用 clip-path 或漸變，可能導致渲染性能下降

? 瀏覽器前綴：部分屬性需加 -webkit- 前綴（如 clip-path）