網頁設計

在網頁設計開發過程中，很多地方有可能會運用到三角形（小三角），例如：tooltips提示框、下拉式功能表、甚至在loading載入動畫裡。不管你喜歡還是不喜歡，這些小元素對各UI元素之間的聯繫關係式很重要的。

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

利用編碼顯示三角形圖片

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

http://webcodertools.com/imagetobase64converter

http://image2base64.wemakesites.net/

優點

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

缺點

你需要使用一個圖片編輯軟體去設計

對於較大的圖片，最終轉換成字串佔用大小會很大

舊版本的瀏覽器，如：IE6/IE7是不相容的

CSS 邊框製作一個三角形

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

優點

很容易的通過修改一些CSS代碼屬性值而更改顏色和大小

這是一個跨瀏覽器的解決方案。

缺點

這個方式使用的是border，所以你不能添加陰影、漸變、和其他一些CSS3效果

請記住，IE6是不支持透明邊界的-如果你關心這個問題

如果你使用火狐瀏覽器，要知道，CSS的“透明”有時可能不會是透明的，特別是在對角線邊框

HTML 字元製作一個三角形

它是基於使用可用的Unicode字元清單的字元。

優點

它是一個跨瀏覽器的技術

可以使用CSS3的text-shadow屬性添加陰影。

更多完整內容：http://www.singleboy.org/web-design/191.html