你可以在很多地方看到三角形（小三角）：tooltips提示框、下拉選單、甚至在loading載入動畫裡。不管你喜歡還是不喜歡，這些小元素對各UI元素之間的聯絡關係式很重要的。

有一些不同的方法來設計並製作一個三角形，在本文中，我將介紹：

編碼 圖片

假如你已經有了三角形的圖片，並且減少HTTP請求，那麼將這個圖片轉換成一個BASE64字串是最好的解決方案。

有用的工具（用於圖片轉換成BASE64編碼）:

優點

• 你可以按照自己的思想設計陰影，漸變等，然後對其進行轉換編碼

缺點

• 你需要使用一個圖片編輯軟體去設計
• 對於較大的圖片，最終轉換成字串佔用大小會很大
• 舊版本的瀏覽器，如：IE6/IE7是不相容的

CSS 邊框

這也是一個常用的使用方式，如tooltips資訊提示框和下拉選單。以上的示例，這是一個我最喜歡的方法建立小而且有用的三角形。

CSS邊框還有一種用法

  .triangle{
    height:0px;
    width: 0px;
    border-style: solid;
    border-width: 30px;
    border-color: red transparent transparent transparent;
  }

優點

• 很容易的通過修改一些CSS程式碼屬性值而更改顏色和大小
• 這是一個跨瀏覽器的解決方案。

缺點

• 這個方式使用的是border,所以你不能新增陰影、漸變、和其他一些CSS3效果
• 請記住，IE6是不支援透明邊界的-如果你關心這個問題
• 如果你使用火狐瀏覽器，要知道，CSS的“透明”有時可能不會是透明的，特別是在對角線邊框，越多更多 here.

HTML 字元

它是基於使用可用的Unicode字元列表的字元。

備註：你可以右擊你的輸入法，從符號輸入中選擇三角形，此處三角形為文字。

優點

• 它是一個跨瀏覽器的技術
• 您可以使用CSS3的text-shadow屬性新增陰影。

缺點

• 不能使用太多的CSS3效果，除了使用文字陰影。
• 在所有的瀏覽器，這是相當不可能實現畫素完美。

CSS 旋轉正方形

理論上,這種方式，你需要使用兩個內容塊，但是，並沒有限制是使用兩個元素，所以可以使用一個元素加一個偽元素。

• 建立一個內容裡。例如100×100畫素 – 這將包含旋轉塊。
• 旋轉包含的這個塊45度，從而獲得一個菱形
• 將菱形的塊向頂部便宜，然後設定溢位，設定父層容器截斷（父元素使用 overflow:hidden; 進行截斷）
• 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;
}

最後的話

我必須承認，我並沒有介紹太多在最後兩個方式在這篇文章中所描述的：Canvas和SVG。這是因為他們是非常強大的，我必須介紹因為未來他很強大。不管怎樣，事實是，他們的能力遠遠大於這些微不足道的三角形。這些方法，建立三角形，讓我知道你的想法，你更經常使用的是什麼方法？

轉載自：http://www.daqianduan.com/4721.html ，向大神致敬