你可以在很多地方看到三角形（小三角）：tooltips提示框、下拉菜單、甚至在loading載入動畫里。不管你喜歡還是不喜歡，這些小元素對各UI元素之間的聯系關系式很重要的。
有一些不同的方法來設計並制作一個三角形，在本文中，我將介紹：
編碼 圖片
假如你已經有了三角形的圖片，並且減少HTTP請求，那么將這個圖片轉換成一個BASE64字符串是最好的解決方案。
有用的工具（用於圖片轉換成BASE64編碼）:
優點
- 你可以按照自己的思想設計陰影，漸變等，然后對其進行轉換編碼
缺點
- 你需要使用一個圖片編輯軟件去設計
- 對於較大的圖片，最終轉換成字符串占用大小會很大
- 舊版本的瀏覽器，如：IE6/IE7是不兼容的
CSS 邊框
這也是一個常用的使用方式，如tooltips信息提示框和下拉菜單。以上的示例，這是一個我最喜歡的方法創建小而且有用的三角形。
優點
- 很容易的通過修改一些CSS代碼屬性值而更改顏色和大小
- 這是一個跨瀏覽器的解決方案。
缺點
- 這個方式使用的是border,所以你不能添加陰影、漸變、和其他一些CSS3效果
- 請記住，IE6是不支持透明邊界的-如果你關心這個問題
- 如果你使用火狐瀏覽器，要知道，CSS的“透明”有時可能不會是透明的，特別是在對角線邊框，越多更多 here.
HTML 字符
它是基於使用可用的Unicode字符列表的字符。
優點
- 它是一個跨瀏覽器的技術
- 您可以使用CSS3的text-shadow屬性添加陰影。
缺點
- 不能使用太多的CSS3效果，除了使用文字陰影。
- 在所有的瀏覽器，這是相當不可能實現像素完美。
CSS 旋轉正方形
理論上,這種方式，你需要使用兩個內容塊，但是，並沒有限制是使用兩個元素，所以可以使用一個元素加一個偽元素。
- 創建一個內容里。例如100×100像素 – 這將包含旋轉塊。
- 旋轉包含的這個塊45度，從而獲得一個菱形
- 將菱形的塊向頂部便宜，然后設置溢出，設置父層容器截斷
- There you go!
優點
- CSS3陰影，漸變等可以更多的使用
缺點
- 這個解決方案不是跨瀏覽器的,首先是因為CSS3旋轉。
HTML5 Canvas
在你的HTML文件中有以下的canvas元素：
<canvas id="triangle" height="100" width="100">Triangle</canvas>
這里的如何使用JavaScript繪制一個三角形：
var canvas = document.getElementById('triangle');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
context.lineTo(50, 100);
context.closePath();
context.fillStyle = "rgb(78, 193, 243)";
context.fill();
SVG (Scalable Vector Graphics)
這是如何在您的標簽，你可以定義一個內聯SVG三角形：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle"> <polygon points="0,0 100,0 50,100"/> </svg>
然后，只需添加一些樣式：
.svg-triangle{
margin: 0 auto;
width: 100px;
height: 100px;
}
.svg-triangle polygon {
fill:#98d02e;
stroke:#65b81d;
stroke-width:2;
}